clientWidth“躺”，无法确定元素的实际宽度

Question

<div style="width: 50px;">
  <div id="theElement" style="position: relative; left 25px;">textMuchLongerThan50[</div>
</div>

document.getElementById("theElement").clientWidth总是返回50，即父元素的宽度，而元素的内容显然要宽得多

(元素本身实际上有这个宽度，但我需要知道它的“自然”宽度，即其内容的宽度。)

在Chrome和IE中体验这种行为。如果阿诺伊纳知道如何确定相对定位的DIV的实际尺寸居住在另一个预先设定/有限宽度.？

Answer 1

您对scrollWidth：示例感兴趣

Answer 2

这是因为它是一个块元素，它实际上是从它的父元素获取它的宽度。其内部的文本在其容器外溢出，但并不影响容器的实际宽度。

您可以通过向内部border添加<div>样式来证明这一点。

通过更改元素的显示类型，可以使元素从文本的宽度中获取其宽度。

如果将其设置为display:inline-block;，它将报告正确的宽度。

如果现在添加一个border，您会注意到它也发生了变化。