1. 偏移量
- offsetHeight: 元素在垂直方向上占用的空间大小。包括元素的高度、（可见的）水平滚动条的高度、上下边框高度。
- offsetWidth: 与 offsetHeight 同理。
- offsetLeft: 元素的左外边框至包含元素的左内边框之间的像素距离。
- offsetTop: 与 offsetLeft 同理。
- offsetParent: 因为 offsetLeft 和 offsetTop 属性与包含元素有关，包含元素的引用保存在 offsetParent 属性中。offsetParent 不一定与 parentNode 相等，offsetParent 是距离元素最近的具有大小的元素。
偏移量的图解
其中 offsetParent 是已知定位的元素。
** 举个例子：**
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>偏移量测试</title>
</head>
<body>
<div class="big">
<div class="inner"></div>
</div>
</body>
</html>
.big{
width: 200px;
height: 200px;
background: orange;
margin-top:100px;
margin-left:100px;
}
.inner {
width:100px;
height:100px;
background:purple;
margin:50px;
}
我们来测试 inner 元素， big 和 inner 元素都是默认定位。即：没有定位，元素出现在正常的流中。
显示效果为：
没有定位时的两个元素
然后我们测试 inner 元素和 big 元素的偏移量。
var inner = document.getElementsByClassName("inner")[0];
var big = document.getElementsByClassName("big")[0];
inner.offsetLeft // 158
inner.offsetTop // 100
inner.offsetWidth // 100
inner.offsetHeight // 100
big.offsetLeft // 108
big.offsetTop // 100
big.offsetWidth // 200
big.offsetHeight // 200
inner 元素的 offsetLeft 并不是距它最近的元素的距离。将 big 元素的位置固定后：
- 如果 big 元素的 css 添加:
position: relative;
.big{
position: relative; //添加这一句
}
inner.offsetLeft // 50
inner.offsetTop // 0
- 如果 big 元素的 css 添加:
position: absolute;
.big{
position: absolute; //添加这一句
}
inner.offsetLeft // 50
inner.offsetTop // 50
想知道某个元素在页面上的偏移量，将这个元素的 offsetLeft 和 offsetTop 与其 offsetParent 的相同属性相加，如此循环至根元素。
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;
}
偏移量的属性都是只读的，每次访问都要重新计算，重复使用时，可以将它们保存在局部变量中，以提高性能。
2. 客户区大小
客户区大小（client dimension）是指元素内容及其内边距所占据的空间大小。
- clientWidth: 元素内容区宽度加上左右内边距宽度。滚动条的大小不计算在内。
- clientHeight: 与 clientWidth 同理。
客户区的图解
function getViewport(){
if(document.compatMode == "BackCompat"){
return {
width:document.body.clientWidth,
height: document.body.clientHeight
}
} else {
return {
width: document.documentElement.clientWidth,
height: document.documentElement.clientHeight
}
}
}
3. 滚动大小
滚动大小（scroll dimension）指的是包含滚动内容的元素的大小。
网页上的每个元素还有scrollHeight和scrollWidth属性，指包含滚动条在内的该元素的视觉面积。
那么，document对象的scrollHeight和scrollWidth属性就是网页的大小，意思就是滚动条滚过的所有长度和宽度。
- scrollHeight: 在没有滚动条的情况下，元素内容的总高度。
- scrollWidth: 在没有滚动条的情况下，元素内容的总宽度。
- scrollLeft: 被隐藏在内容区域左侧的像素数。通过设置这个属性可以改变元素的滚动位置。
- scrollTop: 同 scrollLeft 理。
function getPagearea(){
if (document.compatMode == "BackCompat"){
return {
width: Math.max(document.body.scrollWidth,
document.body.clientWidth),
height: Math.max(document.body.scrollHeight,
document.body.clientHeight)
}
} else {
return {
width: Math.max(document.documentElement.scrollWidth,
document.documentElement.clientWidth),
height: Math.max(document.documentElement.scrollHeight,
document.documentElement.clientHeight)
}
}
}
在确定文档的总高度时，必须取得 scrollWidth/clientWidth 和 scrollHeight/clientHeight 中的最大值。才能保证在浏览器下得到精确的结果。?
参考链接 ：用Javascript获取页面元素的位置
