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

Question

我正在努力学习并为自己提供引用，但我找不到正确、足够且不那么困惑的信息。所以告诉我如何找到这些的宽度..

假设有一个 DOM 元素，四周有 10 像素的内边距，四周有 5 像素的边框，四周有 30 像素的边距，并且内容对于它来说太长所以有滚动条。

使用 javascript 查找宽度...

1. 直至 margin 。
2. 直到边界。
3. Inside Border Padding 和垂直滚动条(如果存在)。
4. 最多填充，不包括垂直滚动条(如果存在)。
5. 仅显示可见内容。 (没有滚动条、填充、边框、边距、额外内容)
6. 最多可滚动区域中可见和隐藏的内容，并带有填充
7. 直到可滚动区域中可见和隐藏的内容，并且没有填充

Javascript 有太多不直观的陷阱，所以请一劳永逸地弄清楚。

到目前为止我得到了这个:

1. 未知
2. element.offsetWidth
3. 未知
4. element.clientWidth
5. 未知(CSS 宽度？)
6. element.scrollWidth(见下文)
7. 未知

我所知道的唯一解决方法是使用大量 javascript 来获取计算值，然后手动计算所有这些..但也许有内置函数或更好的方法来查找东西。

更多问题:

• scrollWidth 仅包含左填充..它不应该包含两者或不包含，或者至少有其他选项可以。 LINK
• box Sizing to border box 改变了整个世界，为此需要再次回答上面的每个问题。例如对于 5 css width 属性将不再适用。

Answer 1

没有一种功能可以解决您的问题。

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

.innerWidth()会给你元素的宽度。它是元素中内容加上padding的总宽度，但不包括边框，

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

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

内部和外部宽度函数是镜像的，并且对高度的作用完全相同。

通常，如果您在主体元素之类的对象上使用 .innerWidth()，它会返回文档的宽度减去滚动条，因为滚动条不是内容 View 端口的一部分。

元素内部是另一个故事。

我在谷歌搜索中能找到的最好的东西是另一个 StackOverflow question.哪个轮廓渲染和元素在可滚动元素内部达到 100% 宽度，获取其宽度，然后删除该元素，因为它不需要。可以用相同的方式找到减去水平滚动条的东西的高度。但是，一旦您同时拥有垂直和水平滚动条，事情可能/将会变得复杂，因为 100% 高度或宽度的元素可能会扩展到超出可查看空间的范围，具体取决于内容如何呈现到元素中滚动条。