clipboard.png
offset系列——常用于获取元素位置
1.offsetWidth:元素内容+padding+border
2.offsetLeft：元素在左外边框至包含它的元素的左内边框之间的像素距离
3.offsetTop：同理。
4.offsetParent：最近的相对定位的父元素（https://www.jb51.net/article/117848.htm）
client系列——常用于获取元素大小
1.clientWidth：元素内容+padding
2.clientHeight：同理
scroll系列——常用于获取元素滚动距离
1.scrollWidth：没有滚动条时的实际内容宽度+padding
2.scrollLeft：被隐藏在内容区域左侧的像素数。通过设置这个属性可以改变元素的滚动位置
3.scrollTop：同理
获取位置的方法代码
function getPos(elem) {
var offset = getOffsets(elem);
var scroll = getScrolls(elem);
return {
x: offset.x - scroll.x,
y: offset.y - scroll.y
};
function getOffsets(elem) {
var position = {
x: 0,
y: 0
};
while (elem && !isBody(elem)) {
position.x += elem.offsetLeft;
position.y += elem.offsetTop;
elem = elem.offsetParent;
}
return position;
}
function getScrolls(elem) {
var position = {
x: 0,
y: 0
};
while (elem && !isBody(elem)) {
position.x += elem.scrollLeft;
position.y += elem.scrollTop;
elem = elem.parentNode;
}
return position;
}
function isBody(element) {
return (/^(?:body|html)$/i).test(element.tagName);
}
}
