clipboard.png
offset系列——常用于獲取元素位置
1.offsetWidth:元素內(nèi)容+padding+border
2.offsetLeft：元素在左外邊框至包含它的元素的左內(nèi)邊框之間的像素距離
3.offsetTop：同理。
4.offsetParent：最近的相對定位的父元素（https://www.jb51.net/article/117848.htm）
client系列——常用于獲取元素大小
1.clientWidth：元素內(nèi)容+padding
2.clientHeight：同理
scroll系列——常用于獲取元素滾動距離
1.scrollWidth：沒有滾動條時的實際內(nèi)容寬度+padding
2.scrollLeft：被隱藏在內(nèi)容區(qū)域左側(cè)的像素數(shù)恬总。通過設(shè)置這個屬性可以改變元素的滾動位置
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);
}
}
