关于浏览器:DOM-元素大小

一、偏移量 (offset dimension)

元素的偏移量

偏移量，包含元素在屏幕上占用的所有可见空间。元素的可见大小由其高度、宽度决定，包含内容 content 大小、内边距 padding、滚动条 scrollbar 大小、边框 border 大小，不包含 外边距 margin。

通过下列 4 个属性能够获得元素的偏移量：

• offsetHeight：元素在垂直方向上占用的空间大小，以像素计算。包含元素的高度、（可见的）程度滚动条的高度、高低边框高度。
• offsetWidth：元素在程度方向上占用的空间大小，以像素计算。包含元素的宽度、（可见的）垂直滚动条的高度、左右边框的宽度。
• offsetLeft：元素的左外边框至蕴含元素 offsetParent 的左内边框之间的像素间隔。
• offsetTop：元素的上外边框至蕴含元素 offsetParent 的上内边框之间的像素间隔。

其中，MDN 对 offsetParent 的定义是：

HTMLElement.offsetParent 是一个只读属性，返回一个指向最近的（指蕴含层级上的最近）蕴含该元素的定位元素或者最近的 table,td,th,body元素。当元素的 style.display 设置为 “none” 时，offsetParent 返回 null。offsetParent 很有用，因为 offsetTop 和 offsetLeft 都是绝对于其内边距边界的。

须要补充的是，元素的 position 为 fixed 时，offsetParent 也返回 null。元素 body 的 offsetParent 也返回 null。

元素在整个页面上的偏移量：绝对于文档的坐标

想要获取元素在页面上的偏移量，即元素在页面上的相对横纵坐标，能够通过累加该元素及其各层蕴含元素的 offsetTop 和 offsetLeft 即可。示例代码如下：

function getElementLeft(element) {
    var actualLeft = element.offsetLeft;
    var current = element.offsetParent;

    while (current !== null) {
        actualLeft += current.offsetLeft;
        current = current.offsetParent;
    }

    return actualLeft;
}

function getElementTop(element) {
    var actualTop = element.offsetTop;
    var current = element.offsetParent;

    while (current !== null) {
        actualTop += current.offsetTop;
        current = current.offsetParent;
    }

    return actualTop;
}

须要留神的是，对于应用表格和内嵌框架布局的页面，因为不同浏览器实现这些元素的形式不同，因而失去的值不肯定可信。另外，如果其中一层蕴含元素呈现滚动条，这两个函数计算的值也不可用。

只读

所有的偏移量属性都是只读的，而且每次拜访它们都须要从新计算。因而，咱们应该尽量避免反复拜访这些属性，以升高浏览器性能累赘。在元素内容稳固的状况下，如果须要反复拜访当中的某些属性值，咱们该当将其保留为局部变量以进步性能。

二、客户区大小 (client dimension)

元素的客户区大小，指的是元素内容 content 及其内边距 padding 所占据的空间大小，不包含滚动条占用的空间。

无关客户区大小的属性值有两个：

• clientWidth：是元素内容区宽度加左右内边距的宽度。
• clientHeight：是元素内容区高度加上下内边距的高度。

须要留神的是，客户区大小的属性与偏移量一样都是只读属性，并且每次拜访都会从新计算。

三、滚动大小 (scroll dimension)

元素的滚动大小，指的是蕴含滚动内容的元素大小。以下是 4 个与滚动大小相干的属性：

• scrollHeight：在没有滚动条的状况下，元素内容的总高度。
• scrollWidth：在没有滚动条的状况下，元素内容的总宽度。
• scrollLeft：被暗藏在内容区域左侧的像素数。通过设置这个属性能够扭转元素的左右滚动地位。
• scrollTop：被暗藏在内容区域上方的像素数。通过设置这个属性能够扭转元素的高低滚动地位。

举个例子来阐明：
带滚动条时，以上图为例，设置了 overflow: auto 的元素是带滚动条的、彩色边框的元素 parent，外部灰色元素是 child。parent.clientHeight 的值为 parent 的内容高度和高低内边框高度之和。但 parent.scrollHeight 等于其外部元素 child 的客户区高度即 child.clientHeight。

四、确定元素大小

古代浏览器为每个元素都提供了一个便捷的办法 getBoundingClientRect() 来获取元素的大小及地位信息。这个办法返回一个矩形对象 DOMRect。其中蕴含属性元素左上角的 视口坐标 x y、元素四边的 视口地位 left top right bottom、元素偏移量大小 width height。

请留神辨别上文提到的文档坐标和视口坐标的区别：

• 文档坐标 指的是绝对于整个页面文档的坐标地位。
• 视口坐标 指的是绝对于浏览器窗口可见视口的坐标地位。