javascript獲取文檔坐標(biāo)和視口坐標(biāo)_javascript技巧

在定級(jí)窗口和標(biāo)簽頁(yè)中，”視口“只是實(shí)際顯示文檔內(nèi)容的瀏覽器的一部分：它不包括瀏覽器的“外殼”（如菜單、工具條和標(biāo)簽頁(yè)）。

針對(duì)框架也中顯示的文檔，是口試定了框架頁(yè)的元素。無論在何種情況下，當(dāng)討論元素的位置是，必須弄清楚所使用的坐標(biāo)是文檔坐標(biāo)還是視口坐標(biāo)。（注意，視口坐標(biāo)有事也叫作窗口坐標(biāo)）

如果文檔比視口要小，或者說還未出現(xiàn)滾動(dòng)，則文檔的左上角就是視口的左上角，文檔和視口坐標(biāo)系統(tǒng)是同一個(gè)。但是一般來說，要在兩種坐標(biāo)系之間互相轉(zhuǎn)換，必須加上或減去滾動(dòng)的偏移量（scroll offset）。例如，在文檔坐標(biāo)中如果一個(gè)元素的Y坐標(biāo)是200像素，并且用戶已經(jīng)把瀏覽器向下滾動(dòng)了75像素，那么視口坐標(biāo)中元素的Y坐標(biāo)就是125像素。同樣，在視口坐標(biāo)中如果一個(gè)元素的X坐標(biāo)是400像素，并且用戶已經(jīng)水平滾動(dòng)了視口200像素，那么文檔坐標(biāo)中像素的X坐標(biāo)中元素的X坐標(biāo)就是600像素。

文檔坐標(biāo)比視口坐標(biāo)更加基礎(chǔ)，并且在用戶滾動(dòng)是他們不會(huì)發(fā)生變化。不過，在客戶端編程中使用視口坐標(biāo)是非常常見的。當(dāng)使用CSS指定元素的位置時(shí)運(yùn)用了文檔坐標(biāo)。但是最簡(jiǎn)單的查詢?cè)匚恢玫姆椒ǎ篻etBoundingClientRect()返回視口坐標(biāo)中的位置。類似的，當(dāng)為鼠標(biāo)事件注冊(cè)事件處理程序函數(shù)時(shí)，報(bào)告的鼠標(biāo)指針的坐標(biāo)是在視口坐標(biāo)系中。

為了在坐標(biāo)系中轉(zhuǎn)換，我們需要判定瀏覽器窗口的滾動(dòng)條的位置。Window對(duì)象的pageXoffset和pageYOffset屬性在所有的瀏覽器中提供這些值，除了IE8及更早的版本以外。IE（和所有現(xiàn)代瀏覽器）也可以通過scrollLeft和scrollTop屬性來獲得滾動(dòng)條的位置。令人迷惑的是，正常的情況下通過查找文檔的根節(jié)點(diǎn)（document.documentElement）來獲取這些屬性，但是在怪異模式下，必須在文檔的元素（documeng.body）上查詢它們。以下顯示了如何簡(jiǎn)便的查詢滾動(dòng)條的位置。

有時(shí)候能夠判定視口的尺寸也是非常有用的，例如，為了確定文檔的案部分是當(dāng)前可見的。利用滾動(dòng)偏移量查詢視口的尺寸的簡(jiǎn)單方法在IE8及更早版本中無法工作，而且該技術(shù)在IE中的運(yùn)行法師還要取決于瀏覽器是否處于怪異模式還是標(biāo)準(zhǔn)模式。

window下的屬性：

innerHeight:包括滾動(dòng)條在內(nèi)的窗口內(nèi)容部分的高度

innerWidth:包括滾動(dòng)條在內(nèi)的窗口內(nèi)容部分的寬度

outerHeight:整個(gè)瀏覽器的高度，包括界面所有組成部分。

outerWidth:整個(gè)瀏覽器的寬度，包括界面所有組成部分。

pageXOffset:瀏覽器窗口的滾動(dòng)條X軸的位置

pageYOffset:瀏覽器窗口的滾動(dòng)條Y軸的位置

scrollX:瀏覽器窗口的滾動(dòng)條X軸的位置

scrollY:瀏覽器窗口的滾動(dòng)條Y軸的位置

屬性

document.documentElement document.body
clientHeight 視口內(nèi)可見內(nèi)容的大小，不包括滾動(dòng)的部分和滾動(dòng)條。
clientWidth
clientLeft　　
clientTop
offsetHeight 內(nèi)容大小，并且包括滾動(dòng)條。
offsetWidth
offsetLeft
offsetTop
scrollHeight 滾動(dòng)內(nèi)容的大小，包括滾動(dòng)的部分,但不包括滾動(dòng)條。
scrollWidth
scrollTop
scrollWidth

查詢窗口的視口尺寸：

以上所述就是本文的全部?jī)?nèi)容了，希望大家能夠喜歡。

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com