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