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

Question

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

document.getElementById（“theElement”）。clientWidth 总是返回50，这是父元素的宽度，而显然元素的内容要宽得多

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

在Chrome和IE中遇到此行为。如果anoyne知道如何确定一个相对定位的DIV的实际尺寸，该DIV位于另一个具有预设/有限宽度的DIV中......？

Answer 1

您对scrollWidth：Example

感兴趣

Answer 2

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

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

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

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

如果您现在添加border，您会发现它也已发生变化。