JavaScript之确定页面中元素大小_javascript中元素大小-CSDN博客

本文链接：https://blog.csdn.net/github_39673115/article/details/76549134

1. 偏移量

偏移量包括元素在屏幕上占用的所有可见空间。元素的可见大小由其高度、宽度决定，包括所有内边距、滚动条和边框大小（注意：不包括外边距）。

offsetWidth：元素在水平方向上占用的空间
offsetHeight：元素在垂直方向上占用的空间
offsetTop：元素的上外边框至包含元素的上内边框之间的像素距离
offsetLeft：元素的左外边框至包含元素的左内边框之间的像素距离

一般来说，页面中的所有元素都会被包含在几个<div>元素中，这些元素的offsetParent就是<body>元素。

2. 客户区大小

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

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

可以用以下代码确定浏览器视口的大小：

function getViewport() {
    if(document.compatMode == "BackCompat") {  //IE7之前版本
        return {
            width: document.body.clientWidth,
            height: document.body.clientHeight
        };
    } else {
        return {
            width: document.documentElement.clientWidth,
            height: document.documentElement.clientHeight
        };
    }
}

3. 滚动大小

滚动大小指包含滚动内容的元素的大小。

scrollWidth：在没有滚动条的情况下，元素内容的总宽度
scrollHeight：在没有滚动条的情况下，元素内容的总高度
scrollTop：被隐藏内容在区域上方的像素数，通过设置这个属性可以改变元素的滚动高度
scrollLeft：被隐藏内容在区域左侧的像素数，通过设置这个属性可以改变元素的水平方向显示的位置