获取句子开头和结尾的坐标

Question

我有一个<span></span>，其中有一个句子。像：

<span>A sentence residing within a span</span>

是否有可能获得该句子的起始和结束字母的坐标，即“A”和“n”分别对于附加该跨度的onmouseover等Javascript事件？

跨度位于div内。所以

案例 - I：句子

This is a sentence inline

根据单词“This”的字母“T”评估top和left。

案例 - II：对于句子

... ... ... ... ... ... This is
a sentence broke into two lines.

对于单词“This”的字母“T”评估top，并且对“a”评估left。

有没有办法得到一个句子的两个终端的坐标？

Answer 1

span.getBoundingClientRect()？ docs

Answer 2

如果你想要第一个字符左上角的坐标和句子最后一个字符的右下角，你可以使用元素的getClientRects()方法。这是supported in recent versions of all major browsers。

var rects = span.getClientRects();
var startTopLeft = { x: rects[0].left, y: rects[0].top; };
var lastRect = rects[rects.length - 1];
var endBottomRight = { x: lastRect.right, y: lastRect.bottom; };

请注意，这些坐标是相对于视口而不是文档的。如果您需要使用这些坐标定位其他元素，则需要考虑滚动。