offset系列
? ? ? offsetWidth?offsetHeight?獲取元素真實(shí)的寬高大?。償?shù)值）
? ? ? ?offsetParent?獲取距離元素最近的有定位的父節(jié)點(diǎn)，如果沒(méi)有找到，找body
? ? ? ?offsetLeft?offsetTop???獲取元素到offsetParent之間真實(shí)的距離（純數(shù)值）
? ? ? 以上的共同點(diǎn)：
? ? ? ? 都是只讀屬性，設(shè)置無(wú)效
? ? ? 如果設(shè)置，通過(guò)style來(lái)設(shè)置
scroll家族
成員：?scrollWidth?scrollHeight?scrollLeft?scrollTop
scrollWidth?scrollHeight?獲取元素里面的內(nèi)容寬高
scrollLeft?scrollTop?獲取內(nèi)容卷曲的距離
滾動(dòng)事件??onscroll?當(dāng)滾動(dòng)的時(shí)候會(huì)觸發(fā)
????????獲取整個(gè)頁(yè)面的卷曲距離?==>?有兼容
????????對(duì)老版本的瀏覽器：?通過(guò)html的scrollTop去獲取，如果要是獲取不到，去通過(guò)body的scrollTop去獲取
????????html?==>?document.documentElement
????????document.documentElement.scrollTop
????????document.body.scrollTop
????????console.log(document.documentElement.scrollTop?||?document.body.scrollTop);
????????新版本瀏覽器：
????????window.pageYOffset??獲取垂直方向的卷曲距離
????????window.pageXOffset??獲取水平方向的卷曲距離
????????新老兼容寫(xiě)法
????????console.log(window.pageYOffset?||?document.documentElement.scrollTop?||?document.body.scrollTop);
????????給頁(yè)面注冊(cè)滾動(dòng)事件
????????建議給window來(lái)注冊(cè),?這樣兼容性最好
client家族
?clientWidth??clientHeight?clientTop??clientLeft
clientWidth??clientHeight??獲取可視區(qū)的寬高
?clientTop??clientLeft?獲取元素的上邊框、左邊框的大小
????????獲取頁(yè)面可視區(qū)的寬高?==>?有兼容
????????老版本：通過(guò)html的clientWidth?，或者是通過(guò)body的clientWidth來(lái)獲取
????????console.log(document.documentElement.clientWidth?||?document.body.clientWidth);
????????console.log(document.documentElement.clientHeight?||?document.body.clientHeight);
????????新版本：?window.innerWidth??window.innerHeight
????????新老兼容
????????console.log(window.innerWidth?||?document.documentElement.clientWidth?||?document.body.clientWidth);
????????onresize?當(dāng)瀏覽器的窗口大小發(fā)生改變的時(shí)候觸發(fā)
????????給頁(yè)面注冊(cè)，?建議給window注冊(cè)
????????window.onresize?=?function?()?{
????????????console.log(window.innerWidth?||?document.documentElement.clientWidth?||?document.body.clientWidth);
????????}
? ? ? 三大家族總結(jié)
? ? ? ? 1.?offset系列
? ? ? ? ? 成員：offsetWidth?offsetHeight?offsetLeft?offsetTop?offsetParent
? ? ? ? ? ?作用：獲取元素真實(shí)的寬高大小，獲取元素到offsetParent之間真實(shí)的距離
? ? ? ? 2.?scroll系列
? ? ? ? ? ? 成員：scrollWidth?scrollHeight?scrollLeft?scrollTop
? ? ? ? ? ? 常用的：scrollTop
? ? ? ? ? ?作用：獲取頁(yè)面的垂直方向的卷曲距離
? ? ? ? ?獲取：?window.pageYOffset
? ? ? ? ?事件：滾動(dòng)事件?onscroll
? ? ? 3.?client系列
? ? ? ? ? 成員：clientWidth?clientHeight?clientLeft?clientTop
? ? ? ? ? 常用的：clientWidth?clientHeight
? ? ? ? ? 作用：獲取頁(yè)面的可視區(qū)的寬高
? ? ? ? ? ? 獲?。?window.innerWidth?window.innerHeight
? ? ? ? ? ?事件：onresize??窗口大小發(fā)生改變觸發(fā)
? ? ? ? 給頁(yè)面注冊(cè)的事件（document、window）
? ? ? ?給window注冊(cè)的
? ? ? ?1.?window.onscroll
? ? ? ?2.?window.onresize
? ? ? ? 3.?window.onload
? ? ? ?其他的給document注冊(cè)即可
