问题
Is it possible to retrieve the geometric position (i.e. top/left offsets from either the parent element, the page, etc) of a text node?
回答1:
Not directly. TextNode does not have the originally-IE offset* (and similar) extensions for measuring on-viewport positioning.
On IE only, you could create a TextRange object, laboriously attempt to align it with the bounds of the TextNode, then measure the boundingLeft/boundingTop of the TextRange, and add it to the position of the parent element (obtained by the usual means). However this is a bunch of work for a potentially-wobbly single-browser solution.
Another approach you might be able to get away with would be wrapping the text in a span element (either in the document, or dynamically and/or temporarily by script), and using the span to measure positioning, assuming it's not picking up any additional styles that may affect the position. Note however that a wrapped span may not give the expected right/bottom values; depending on what you want to do with it, you might end up wrapping the first and last character or some other arrangement.
In summary: urgh, nothing good.
回答2:
Today you can via Range.getBoundingClientRect(). IE9+
// Get your text node
const el = document.querySelector('strong')
const textNode = el.firstChild;
// Get coordinates via Range
const range = document.createRange();
range.selectNode(textNode);
const coordinates = range.getBoundingClientRect()
console.log(coordinates);/* Demo CSS, ignore, highlights box coordinates */ body{max-width:300px}strong{position:relative}strong,strong:before{border:solid 1px red}strong:before{content:'';position:absolute;right:100%;bottom:100%;width:100vw;height:100vh;pointer-events:none}The red lines will show you the coordinates bounding box of the <strong>selected textnode</strong>.回答3:
Have a look at this article - it uses the offsetParent property to recursively figure out the offset.
I would always recommend jquery over rolling your own methods for browser-varying stuff like this. The jquery CSS functions seem to have the methods you need!
回答4:
There isn't any built-in, cross-browser way to do this. I would use jQuery with the Dimensions plugin: http://brandonaaron.net/docs/dimensions/
It is cross-browser and will give you height, width and x & y offsets, among others.
回答5:
These days there are ways. One way: getBoundingRectangle: https://developer.mozilla.org/en-US/docs/Web/API/Element.getBoundingClientRect
来源：https://stackoverflow.com/questions/396649/retrieving-dom-textnode-position