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