【图解】BOM，DOM内置尺寸属性，看完再也不会把screenTop，clientTop，offsetTop，scrollTop搞混了。

一，图示

1.1 屏幕与浏览器

 

 

1.2 浏览器与页面元素

二，说明一些概念

2.1 尺寸属性是为了方便开发者操作页面元素，虽然CSS的属性也可以表示元素的位置和尺寸但CSS属性有很大局限性，比如有的方法只能获取到行内样式所设置的尺寸属性，有的方法返回的是字符串，操作属性不方便等。而浏览器内置属性则不存在这些问题，但内置属性有很多，需要认真分辨那个代表什么才能运用自如。

2.2 内置属性有各自的特性，比如可读可写，可读不可写。可读可写意味着你可以操纵它实现你想要的效果，只读属性意味着只能用它来做一些判断，或当作值来使用。

2.3 文档标签和文档内部的元素标签的尺寸属性性质绝大部分是相同的。只有部分属性在获取方式上有一些差别，以及极个别属性的差异。

2.4 尺寸的计算单位不同共有两种：物理像素，CSS像素。(此不在本文讨论范围)

 

三，各属性的详细解释（由外到内）

1.  screen.width:  该属性返回的宽度值不一定就是浏览器窗口可使用的宽度。当有其他小工具占据了屏幕空间时，浏览器有时不能占用小工具（如任务栏）占据的空间。screen.height与screen.width类似。

2. window.screenTop:  返回浏览器窗口到屏幕顶部边缘的CSS 像素距离数值，window.screenLeft同理。

3. 元素.offsetTop:  只读属性，它返回当前元素border外边距相对于其 offsetParent 元素的border外边距的距离以像素计，元素.offsetLeft同理。

4. 元素.clientTop:  只读属性，返回一个元素顶部边框的宽度（以像素计）。不包括顶部外边距或内边距。元素.clientLeft同理。

5. 元素.offsetWidth: 只读属性，返回一个元素的布局宽度。一个典型的（各浏览器的offsetWidth可能有所不同）offsetWidth是测量包含元素的边框(border)、水平线上的内边距(padding)、竖直方向滚动条(scrollbar)（如果存在的话）、以及 CSS像素 设置的宽度 width 的值。(注意：当元素是body时，offsetWidth宽度不包含滚动条，window.innerWidth会返回带滚动条的宽度,该属性可读可写)，元素.offsetHeight同理。

6. 元素.clientWidth: 只读属性, 以像素计，内联元素以及没有 CSS 样式的元素的 clientWidth 属性值为 0。元素.clientWidth 属性表示元素的内部宽度。该属性包括内边距 padding，但不包括边框 border、外边距 margin 和垂直滚动条(如果有的话), 元素.clientHeight 同理。

7. 元素.scrollTop：以像素计，一个元素的 scrollTop 值是这个元素的内容顶部（卷起来的）到它的视口可见内容（的顶部）的距离的度量。当一个元素的内容没有产生垂直方向的滚动条，那么它的 scrollTop 值为0，元素.scrollLeft 同理。

8. 元素.scrollWidth: 只读属性, 这个只读属性是元素内容宽度的一种度量，包括由于 overflow 溢出而在屏幕上不可见的内容。scrollWidth值等于元素在不使用水平滚动条的情况下适合视口中的所有内容所需的最小宽度。 宽度的测量方式与 clientWidth 相同：它包含元素的内边距，但不包括边框，外边距或垂直滚动条（如果存在）。 它还可以包括伪元素的宽度，例如::before或::after。 如果元素的内容可以适合而不需要水平滚动条，则其 scrollWidth 等于 clientWidth。元素scrollHeight 同理。 

9. document滚动相关的各属性获取方式有些不同，可以使用 document.scrollingElement.xxx , document.documentElement.xxx，这里的document.scrollingElement，document.documentElement都代表根元素html标签，但不能直接使用html。

四. 后记

写这篇文章的动机也是因为自己对浏览器部分尺寸属性的认识不够深刻，导致一些效果实现不出来。另外对于文中提到的一些概念，大家可以积极去查阅，一些细枝末节的东西不懂往往会成为代码能力提升的最大障碍。 最后由于本人水平有限，如有错误或考虑不周的地方欢迎批评指正。

 

参考文献：

MDN web文档

w3sclool在线教程