如何在javascript中获得具有不同标准的宽度

Question

我正在努力学习并为自己做一个参考，但我找不到正确的，足够的，而不是那么令人困惑的信息。那么告诉我如何找到这些的宽度..

假设DOM元素周围有10px填充，边界5px，边缘30 px，内容太长，因此有滚动条。

使用javascript查找宽度...

1. up to Margin。
2. upto Border。
3. 内部边框填充，加上垂直滚动条（如果存在）。
4. 向上填充，不包括垂直滚动条（如果存在）。
5. 仅限于可见的内容。 （没有scrollBar，填充，边框，边距，额外内容）
6. 指向可滚动区域中可见和隐藏且带有填充
的内容
7. 指向可滚动区域中可见和隐藏但没有填充
的内容

Javascript太多不直观的捕获，所以请一劳永逸地说清楚。

到目前为止，我已经得到了这个：

1. 未知
2. 的 element.offsetWidth
3. 未知
4. 的 element.clientWidth
5. unknown（css width？）
6. element.scrollWidth （见下文）
7. 未知

我知道只有使用大量的javascript来获取计算值然后手动计算所有这些的变通方法。但也许有内置函数或更好的查找方法。

更多问题：

• scrollWidth 仅包含左侧填充...不应包含两者或不包含或至少包含其他选项。 LINK
• 框大小调整到边框改变了整个世界，上面的每个问题都需要再次回答。例如， 5 css width属性不再是真实的。

Answer 1

没有任何一项功能可以解决您所要求的问题。

.outerWidth()将给出元素，填充，边框，包含内容等的大小。但是它不会给你元素的余量。使用.outerWidth（true）参数将为您提供元素的宽度，包括边距。

.innerWidth()将为您提供元素的宽度。它是元素中内容的总宽度加上填充，但不是边框，

如果由于某种原因你想知道内部宽度和外部宽度之间的差异。这几乎是边框宽度或边框边缘与边距之间的差异，只是将它们相互减去。

$widthDif = outerWidth(."Somethng") - .innerWidth('.something');

内部和外部宽度函数是镜像的，并且在高度上的工作方式完全相同。

通常，如果在主体元素之类的东西上使用.innerWidth（），则返回文档的宽度减去滚动条，因为滚动条不是内容视图端口的一部分。

元素内部是另一个故事。

我在谷歌搜索中找到的最好的东西是另一个StackOverflow question.，其中描绘了可滚动元素内部100％宽度的渲染和元素，获取其宽度，然后删除元素，因为它是不需要的。可以通过相同的方式找到减去水平滚动条的高度。然而，一旦你有一个垂直和水平滚动条同时，事情可能会/将会变得复杂，因为100％高度或宽度元素可能扩展超出可视空间中的内容，具体取决于内容如何呈现到元素中滚动条。