从根本上理解DOM和BOM中不同的位置和大小属性

引言

相信很多初学前端的小伙伴都被 DOM 及 BOM 中的位置及大小属性迷惑甚至折磨过。它们是前端开发中最常用的概念之一，但不同的属性在实际用途和计算方式上都有很大区别。在本文中，我们将深入探讨 DOM 和 BOM 中的位置及大小属性，为初学者提供一个更全面的了解，并为进阶者提供一个回顾和学习的机会。

1. DOM中的位置和大小属性

DOM 是 JavaScript 操作网页的接口，全称为“文档对象模型”（Document Object Model）。它的作用是将网页转为一个 JavaScript 对象，从而可以用脚本进行各种操作（比如增删内容）。下面就介绍一下 DOM中的位置和大小属性。

1.1 offset 家族

先来张概览图：

• Element.offsetParent

元素的 offsetParent 属性返回最靠近当前元素的、并且 CSS 的position属性不等于static的上层元素。注意：每个元素都有一个默认的 position 属性是 static（除非被设定成其他属性值）。

 
<div style="position: absolute;">
  <p>
    <span>我是准备获取 offsetParent 属性的子元素 span </span>
  </p>
</div>

在上方示例中，span 元素的 offsetParent属性就是div元素。注意 如果某个元素的所有上层节点的position属性都是static，则 offsetParent属性为body元素。

在下面几种情况下，offsetParent属性值会返回 null：

1. 若元素被隐藏（比如设置 display:none ），offsetParent 返回 null。
2. 若元素的 style 属性中的 position 属性为 fixed（此时没有参考元素），则 offsetParent 返回 null。

• Element.offsetLeft，Element.offsetTop

有了 offsetParent 的前置知识，offsetLeft 和 offsetTop 就比较好理解了，Element.offsetLeft返回当前元素左上角相对于Element.offsetParent节点的水平位移，Element.offsetTop返回垂直位移，返回的值为整数类型，单位为像素。

下面两种情况需要注意：

1. 若元素的 style 属性中的 position 属性为 fixed（此时没有参考元素），offsetLeft 表示元素左侧边缘与 viewport（视口）左侧边缘之间的距离。
2. 如果元素处于一个文档流中的隐藏或不可见祖先元素中，则offsetLeft将返回0。

• Element.offsetHeight，Element.offsetWidth

offsetHeight: 返回元素的高度，包括padding、border和可选的水平滚动条的高度。也就是说，它返回的值是元素边框框起来的高度（包括边框宽度和padding），而不包括margin区域和滚动条外的空白区域。

offsetWidth: 返回元素的宽度，其他性质和 offsetHeight 相同。

需要注意的是，这些属性返回的值是整数，不包括小数。这两个属性都是只读属性，只比Element.clientHeight和Element.clientWidth多了边框的高度或宽度。如果元素的 CSS 设为不可见（比如display: none;），则返回0。

1.2 client 家族

先来张概览图：

• Element.clientHeight，Element.clientWidth

clientHeight：返回一个整数值，表示元素节点的 CSS 高度（单位像素），只对块级元素生效，对于行内元素返回0。如果块级元素没有设置 CSS 高度，则返回实际高度。除了元素本身的高度，它还包括padding部分，但是不包括border、margin、水平滚动条的高度（如果存在）。

document.documentElement的clientHeight属性，返回当前视口的高度（即浏览器窗口的高度），等同于window.innerHeight属性减去水平滚动条的高度（如果有的话）。document.body的高度则是网页的实际高度。一般来说，document.body.clientHeight大于document.documentElement.clientHeight。

clientWidth：和 clientHeight 一样，同样只对块级元素有效，也是只包括元素本身的宽度和padding。

• Element.clientLeft，Element.clientTop

clientLeft: 返回元素左侧边框的宽度，即border-left的宽度。它不包括内边距(padding)和外边距(margin)的尺寸，也不包括元素的内容区域。

clientTop: 返回元素顶部边框的宽度，即border-top的宽度。它不包括内边距(padding)和外边距(margin)的尺寸，也不包括元素的内容区域。

注意，这两个属性的值始终是整数。

下面几种情况下，clientLeft和clientTop的值为0：

1. 如果元素的边框样式为none。
2. 如果元素被隐藏（例如通过CSS中的display:none属性或visibility:hidden属性）。
3. 如果元素是行内元素（display: inline）。

1.3 scroll 家族

上图先：

• Element.scrollHeight，Element.scrollWidth

scrollHeight：返回元素内容区域的完整高度（返回一个整数值，单位像素），包括溢出容器、当前不可见的部分。它包括padding，但是不包括border、margin以及水平滚动条的高度（如果有水平滚动条的话），还包括伪元素（::before或::after）的高度。

scrollWidth：返回元素内容区域的完整宽度，其他地方都与scrollHeight属性类似。

这两个属性只读。注意，即使父盒子设置了 overflow: hidden; 隐藏了移出的内容，用 scrollHeight 或 scrollWidth 仍然能返回元素的总高度。

整张网页的总高度可以从document.documentElement或document.body上读取。

 
document.documentElement.scrollHeight
document.body.scrollHeight

• Element.scrollLeft，Element.scrollTop

scrollLeft：返回元素内容区域在水平方向上滚动的像素值。可以设置该属性的值以强制元素滚动到指定的像素位置。当没有水平滚动条时，它的值为0。

scrollTop: 返回元素内容区域在垂直方向上滚动的像素值。可以设置该属性的值为强制元素滚动到指定的像素位置。当没有垂直滚动条时，它的值为0。

这两个属性都可读写，设置该属性的值，会导致浏览器将当前元素自动滚动到相应的位置。

如果要查看整张网页的水平的和垂直的滚动距离，要从document.documentElement元素上读取。

 
document.documentElement.scrollLeft
document.documentElement.scrollTop

2. BOM中的位置和大小属性

BOM（浏览器对象模型）指的是Web浏览器提供的一组对象，用于控制浏览器窗口的外观和行为，并且可以访问浏览器本身的信息。下面就介绍一下 BOM 中的位置和大小属性。

上图先：

• window.screenX，window.screenY

  window.screenX和window.screenY属性，返回浏览器窗口左上角相对于当前屏幕左上角的水平距离和垂直距离（单位像素）。这两个属性只读。

• window.innerHeight，window.innerWidth

  window.innerHeight和window.innerWidth属性，返回网页在当前窗口中可见部分的高度和宽度，即“视口”（viewport）的大小（单位像素）。这两个属性只读。

  用户放大网页的时候（比如将网页从100%的大小放大为200%），这两个属性会变小。因为这时网页的像素大小不变（比如宽度还是960像素），只是每个像素占据的屏幕空间变大了，因此可见部分（视口）就变小了。

  注意，这两个属性值包括滚动条的高度和宽度。

• window.outerHeight，window.outerWidth

  window.outerHeight和window.outerWidth属性返回浏览器窗口的高度和宽度，包括浏览器菜单和边框（单位像素）。这两个属性只读。

• window.scrollX，window.scrollY

  window.scrollX属性返回页面的水平滚动距离，window.scrollY属性返回页面的垂直滚动距离，单位都为像素。这两个属性只读。

• window.pageXOffset，window.pageYOffset

  window.pageXOffset属性和window.pageYOffset属性，是window.scrollX和window.scrollY别名。

• window.Screen.height，window.Screen.width

  浏览器窗口所在的屏幕的高度和宽度（单位像素）。除非调整显示器的分辨率，否则这个值可以看作常量，不会发生变化。显示器的分辨率与浏览器设置无关，缩放网页并不会改变分辨率。

  ​

历史文章：

如何查找和解决前端内存泄漏问题？ - 排查和分析技巧详解

从零开始实现一个基于Vue的Drawer组件

从零开始实现一个基于Vue的MessageBox组件

参考文献：

wangdoc.com/javascript/…