參考文章：https://segmentfault.com/a/1190000002545307
1、對原生的元素屬性的理解
clientWidth = padding*2 + width
clientHeight = padding*2 + height
clientLeft = border
clientTop = border
offsetParent 指的是當(dāng)前元素離自己最近的具有定位的父級元素
offsetWidth = (padding+border)*2 + width
offsetHeight = (padding+border)*2 + height
offsetLeft = 距離offsetParent左邊距離
offsetTop = 距離offsetParent上邊距離
scrollTop 獲取元素中的內(nèi)容 超出 元素上邊界的那部分高度
scrollLeft 獲取元素中的內(nèi)容 超出 元素左邊界的那部分寬度
scrollHeight 獲取元素的完整高度（不包括border）
scrollWidth 獲取元素的完整寬度（不包括border）
除了scrollTop和scrollLeft可讀可寫些侍，其余的只讀
以上返回的值均不帶單位
2仰禀、obj.style.* 屬性
它只能獲取該元素的行內(nèi)樣式，而并不能獲取到該元素最終計算好的樣式
使用obj.currentStyle（IE）和getComputerStyle（IE之外的其他瀏覽器）
返回的值為帶單位的字符串
function getStyle(obj, attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,false)[attr];
}
}
3、Event對象
在js中，對于元素的運動操作通常都會涉及到event對象，而event對象也存在很多位置屬性驹止，且由于瀏覽器兼容性問題會導(dǎo)致這些屬性間相互混淆！
clientX和clientY观蜗，這對屬性是當(dāng)事件后臊恋，鼠標(biāo)點擊位置相對于瀏覽器（可視區(qū)）的坐標(biāo)，從瀏覽器的左上角（0墓捻，0）開始計算鼠標(biāo)點擊位置距離其左上角的位置抖仅。
screenX和screenY是事件發(fā)生時鼠標(biāo)相對于屏幕的坐標(biāo)，以設(shè)備屏幕的左上角為原點砖第，事件發(fā)生時鼠標(biāo)點擊的地方即為改點的screenX和screenY值撤卢。相對于屏幕，而又是瀏覽器梧兼。
offsetX和offsetY放吩，這對屬性是當(dāng)事件時，鼠標(biāo)點擊位置相對于該事件源（不包含border）的位置羽杰，即點擊該div屎慢，以該div為原點來計算鼠標(biāo)點擊位置的坐標(biāo)（注：firefox不支持該屬性瞭稼，firefox中與此屬性對應(yīng)的概念是忽洛，event.layerX和event.layerY腻惠，所以要使用該屬性時，需要做兼容性處理）
var divX = event.offsetX || event.layerX;
- pageX和pageY欲虚，該屬性是事件發(fā)生時鼠標(biāo)點擊位置相對于頁面的位置集灌，通常瀏覽器窗口還沒有出現(xiàn)滾動條時，該屬性和clientX和clientY是等價的复哆，但是當(dāng)瀏覽器出現(xiàn)滾動條時欣喧，pageX通常會大于clientX，因為頁面還存在被卷起來的部分的寬度和高度梯找。即pageX和pageY是相對于整個頁面的位置
