偏移量（只读）
- offsetHeight 垂直方向上占用的空间大小
元素高度 + 水平滚动条高度（可见的） + 上边框高 + 下边框高 = offsetHeight
- offsetWidth 水平方向上占用的空间大小
元素宽度 + 垂直滚动条宽度（可见的）+ 左边框宽度 + 右边框宽度 = offsetWidth
- offsetTop
包含元素的上外边框 <————> 元素的上外边框
- offsetLeft
包含元素的左外边框 <————> 元素的左外边框
- offsetParent
元素的相对父节点，此时元素相对于谁定位，其就是元素的offsetParent，parentNode就是元素的父节点，两者不一定相等。
客户区大小（只读）
- clientHeight
元素内容高 + 上下内边距 = clientHeight
- clientWidth
元素内容宽 + 左右内边距 = clientWidth
PS：偏移量与客户区属性都是只读，每次访问需重新计算，尽量避免重复访问这些属性，可将其保存在局部变量中提高性能。
滚动大小
- scrollHeight
没有滚动条的情况下，元素内容的总高度。
- scrollWidth
没有滚动条的情况下，元素内容的总宽度。
- scrollTop
隐藏在内容区域上方的像素
- scrollLeft
隐藏在内容区域左侧的像素
确定文档的总高度，需要取得scroll/client两者中的最大值，保证在跨浏览器的环境下得到精确结果。1
2
3
4
5
6
7var docHeight = Math.max(document.documentElement.scrollHeight,
document.documentElement.clientHeight);
var docWidth = Math.max(document.documentElement.scrollWidth,
document.documentElement.clientWidth);
// IE下，需要用document.body代替document.documentElement
// documentElement 是整个节点树的根节点root，即<html> 标签
元素大小
使用方法getBoundingClientRect()，返回一个矩形对象。1
2
3
4
5var dom = document.getElementById('test');
var obj = dom.getBoundingClientRect();
// obj的格式
{bottom: xx, height: xx, left: xx, right: xx, top: xx, width: xx,x: xx, y: xx}
// top、left、right、bottom说明元素在页面中相对于视口的位置