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

4次阅读

共计 2158 个字符，预计需要花费 6 分钟才能阅读完成。

偏移量，包含元素在屏幕上占用的所有可见空间。元素的可见大小由其高度、宽度决定，包含内容 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;
}

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

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

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

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

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

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

元素的滚动大小，指的是蕴含滚动内容的元素大小。以下是 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。