前言

被原生js的各種寬高、位置搞到爆炸，所以做一個小小的總結(jié)！！！

dom對象

只讀屬性

clientWidth和clientHeight

元素的部分內(nèi)容寬高,即：padding+content,如果沒有滾動條，就是元素的寬高，如果有滾動條，則要減去滾動條的寬高！！

offsetWidth和offsetHeight

這是 padding+content+border的寬高，與有無滾動條無關(guān)，之和元素本神的寬高有關(guān)

clientTop和clientLeft

這是用來讀取元素border的寬高

offsetLeft和offsetTop

從該元素的祖先類元素中找Position屬性不為static的那個元素，沒有找到那就是Body。offsetLeft和offsetTop就是距離找到的祖先類元素左上角的left和top

scrollHeight和scrollWidth

當(dāng)元素內(nèi)容超出該元素寬高出現(xiàn)滾動條時，scrollHeight和scrollWidth代表的就是該元素內(nèi)容的實(shí)際寬高，單沒有超出時，這兩個屬性是取不到值的

可讀可寫屬性

scrollTop和scrollLeft

指的是元素內(nèi)的內(nèi)容卷起的寬高！！！！是可以設(shè)置的

obj.style.*

這是獲取到元素行內(nèi)元素的方式，可讀可寫，設(shè)置的時候記得帶上單位

event 對象

clientX和clientY

相對于瀏覽器左上角的位置的坐標(biāo)點(diǎn)

offestX和offsetY

相對于事件源的位置，比如點(diǎn)擊div，則相對于div的左上角的坐標(biāo)點(diǎn)

creenX和screenY

相對于屏幕左上角的位置的坐標(biāo)點(diǎn)

pageY和pageX

相對與頁面左上角的位置，如果沒有出現(xiàn)滾動條，那就和clientX,clientY一樣，如果出現(xiàn)滾動條，那就要吧被卷起的寬高減去，才能獲得 clientX和clientY的效果