整個(gè)瀏覽器
文檔坐標(biāo)：
不會(huì)隨瀏覽器滾動(dòng)而變化
- css指定元素位置時(shí)袋哼，文檔坐標(biāo)
視口坐標(biāo)：
隨瀏覽器滾動(dòng)而變化
- 查詢元素的位置闸衫，視口坐標(biāo)
- 事件處理中的鼠標(biāo)坐標(biāo)，視口坐標(biāo)
pageX和pageY
瀏覽器窗口滾動(dòng)條的位置
pageXOffset
pageYOffset
除ie8及以下scrollLeft和scollTop 適用于所有瀏覽器
e.g.
查詢窗口的視口尺寸 clientWidth和clientHeight
單個(gè)元素
查詢一個(gè)元素視口的位置
getBoundingClientRect()
它不需要參數(shù)弟翘，返回一個(gè)包含left、right悦冀、top睛琳、bottom屬性的對象
除IE瀏覽器外還包含 width和height屬性
- 計(jì)算元素的文檔位置
- 計(jì)算元素的width和height
注getBoundingClientRect()返回元素的坐標(biāo)包含border和padding,但不包含margin
getClientRects()
針對內(nèi)聯(lián)元素，可能占有多行历等，返回一個(gè)對象數(shù)組
注getBoundingClientRect()和getClientRects()返回的是靜態(tài)快照履因，當(dāng)視口改變時(shí)隔披，不會(huì)實(shí)時(shí)更新
滾動(dòng)瀏覽器 scrollTo
offsetLeft羡蛾、offsetTop
相對父元素
e.g. 計(jì)算出該元素的文檔位置
元素的offset硝皂，client桨菜，scroll
clientWidth和clientHeight
1.指的是padding和content
2.(pading和comtent)之前有滾動(dòng)條,不包含滾動(dòng)條
3.i,span內(nèi)聯(lián)元素該值返回0
offsetWidth和offsetHeight
1.指的是 border,padding和content
scrollWidth和srollHeight
1.指的是padding和content,和任何溢出的內(nèi)容的尺寸
2.若沒有溢出的內(nèi)容的尺寸要出，和clientWidth和clientHeigh相等
clientLeft和clientTop
1.通常指的是border,若滾動(dòng)條在左側(cè)农渊，還包含滾動(dòng)條的寬度
2.內(nèi)聯(lián)元素指為0
offLeft和offTop
1.指的是相對于父元素的x,y坐標(biāo)
scrollLeft和scrollTop
1.查詢滾動(dòng)條的位置
2.或指定滾動(dòng)條的位置
3.或使用scrollTo
參考指南：
js權(quán)威指南 15章
