如何获得文本尺寸？

Question

此代码段给出 "theDiv" 的宽度，等于页面的宽度：

<div id="theDiv">This is some text</div>
<script>
    var rect = document.getElementById("theDiv").getBoundingClientRect();
    alert("width of text is (not): " + rect.width);
</script>

有什么方法可以得到 div 中实际文本的宽度（和高度）？

注意：我正在开发一个分析网页的 chrome 扩展 - 我无法更改 dom 和 css，这意味着我不能使用 span 而不是 div 或更改元素的样式。

Answer 1

如果您不能更改 dom 那么您可以通过 CSS:

制作 theDiv inline-block

#theDiv {
   display: inline-block
}

好的，在这种情况下，您可以创建虚拟元素，将其附加到 dom，计算尺寸，然后将其从 dom 中删除：

// fetch source element and his content
var div = document.getElementById("theDiv"),
    text = div.innerHTML;

// create virtual span to calculate dimestions
var span = document.body.appendChild(document.createElement('span'));
    span.innerHTML = text,
    rect = span.getBoundingClientRect();

alert(rect.width);

// remove virtual span from the DOM
document.body.removeChild(span);

Answer 2

据我所知，如果不使用额外的（内联的，通常是不可见的）元素，则无法单独获取元素的文本宽度。
对于那些没有 OP 限制到达这里的其他人来说，可以只使用 JS 而完全不影响页面的流程。

var target = ... // Whichever element's text's width you wish to measure
var ruler = document.createElement("span");

ruler.style.position = "absolute"; // remove from the page's flow
ruler.style.visibility = "hidden"; // and totally stop it from being rendered

// copy font-size, font-family and the text itself
ruler.style.fontSize = target.style.fontSize;
ruler.style.fontFamily = target.style.fontFamily;
ruler.innerHTML = target.innerHTML;

// add to the document so that the styles get applied, allowing us to discover its width
document.body.appendChild(ruler);
var textWidth = ruler.offsetWidth;
// and then promptly remove again from the document
document.body.removeChild(ruler);

Answer 3

您可以使用 Range 来测量文本。例如：

var range = document.createRange();
range.selectNodeContents(document.getElementById("theDiv"));
var rect = range.getBoundingClientRect();
document.getElementById("out").innerHTML = "width of text is: " + rect.width;

<div id="theDiv">This is some text</div>
<div id="out"></div>

Answer 4

您可以使用 clientWidth 或 offsetWidth

Use var offsetWidth =element.offsetWidth;

区别在于offsetWidth包含边框宽度，clientWidth不包含

如何获得文本尺寸？

How can I get text dimensions?

html

javascript

getboundingclientrect