JavaScript之确定页面中元素大小

96
MaterialCoder
2017.07.31 15:02* 字数 426

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:被隐藏内容在区域左侧的像素数,通过设置这个属性可以改变元素的水平方向显示的位置

JavaScript