分别了解offsetWidth，clientWidth，scrollWidth和-Height

问题描述

StackOverflow上有几个关于offsetWidth / clientWidth / scrollWidth（和-Height，分别）的问题，但是没有给出这些值的详细解释。

，网络上有几个来源提供混乱或不正确的信息。

你能给出一个完整的解释，包括一些视觉提示？
此外，如何使用这些值来计算滚动条宽度？

解决方案

CSS框模型相当复杂，特别是当涉及到滚动内容。虽然浏览器使用CSS中的值来绘制框，但如果只有CSS，那么使用JS确定所有尺寸并不简单。

这就是为什么每个元素有六个DOM属性为您提供方便： offsetWidth ， offsetHeight ， clientWidth ， clientHeight ， scrollWidth 和 scrollHeight 。这些是只读属性，代表当前的视觉布局，所有的都是整数（因此可能会出现舍入错误）。

详细讨论：

• offsetWidth ， offsetHeight ：包含所有边框的可视框的大小。可以通过添加 width / height 和paddings和border，如果元素显示：block


• clientWidth ， clientHeight 框内容的可视部分，不包括边框或滚动条，但包括填充。


• scrollWidth ， scrollHeight ：所有框的内容的大小，包括当前隐藏在滚动区域之外的部分。不能直接从CSS计算，取决于内容。

试用一下：

---

由于 clientWidth 会考虑滚动条宽度，因此我们可以使用它来计算滚动bar width通过公式

  scrollbarWidth = offsetWidth  -  clientWidth  -  getComputedStyle（）。borderLeftWidth  -  getComputedStyle（）。borderRightWidth 
不幸的是，我们可能会出现舍入错误，因为 offsetWidth 和 
 code> clientWidth 始终是整数，而实际大小可能是缩放级别不是1的小数。
 
 
 
请注意， / p> 
 
 
  scrollbarWidth = getComputedStyle（）。width + getComputedStyle（）。paddingLeft + getComputedStyle（）。paddingRight  -  clientWidth 
  width   可以在Chrome中正常工作，因此code> 
 c $ c>已经减少滚动条。 （此外，Chrome会将paddingBottom显示在滚动内容的底部，而其他浏览器则不会）
 
There are several questions on StackOverflow regarding offsetWidth/clientWidth/scrollWidth (and -Height, respectively), but none give comprehensive explanation of what those values are.
Also, there are several sources on the web giving confusing or incorrect information.
Can you give a complete explanation including some visual hints?Also, how can those values be used to calculate scroll bar widths?
 解决方案 
The CSS box model is rather complicated, particularly when it comes to scrolling content. While the browser uses the values from your CSS to draw boxes, determining all the dimensions using JS is not straight-forward if you only have the CSS.
That's why each element has six DOM properties for your convenience: offsetWidth, offsetHeight, clientWidth, clientHeight, scrollWidth and scrollHeight. These are read-only attributes representing the current visual layout, and all of them are integers (thus possibly subject to rounding errors).
Let's go through them in detail:
offsetWidth, offsetHeight: The size of the visual box incuding all borders. Can be calculated by adding width/height and paddings and borders, if the element has display: block
clientWidth, clientHeight: The visual portion of the box content, not including borders or scroll bars , but includes padding . Can not be calculated directly from CSS, depends on the system's scroll bar size.
scrollWidth, scrollHeight: The size of all of the box's content, including the parts that are currently hidden outside the scrolling area. Can not be calculated directly from CSS, depends on the content.
Try it out: jsFiddle
Since clientWidth takes the scroll bar width into account, we can use it to calculate the scroll bar width via the formula
scrollbarWidth = offsetWidth - clientWidth - getComputedStyle().borderLeftWidth - getComputedStyle().borderRightWidth
Unfortunately, we may get rounding errors, since offsetWidth and clientWidth are always integers, while the actual sizes may be fractional with zoom levels other than 1.
Note that this
scrollbarWidth = getComputedStyle().width + getComputedStyle().paddingLeft + getComputedStyle().paddingRight - clientWidth
does not work reliably in Chrome, since Chrome returns width with scrollbar already substracted. (Also, Chrome renders paddingBottom to the bottom of the scroll content, while other browsers don't)
                        
这篇关于分别了解offsetWidth，clientWidth，scrollWidth和-Height的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！