首頁 > 開發者 > JavaScript
javascript擷取文檔座標和視口座標，javascript視口
元素的位置是以像素度量的，向右代表X座標的增加，向下代表Y座標的增加，但是，有兩個不同的點作為座標系的原點：元素的X和Y座標可以相對於文檔的左上方或者相對於在職中顯示文檔的視口的左上方。
在定級視窗和標籤頁中，”視口“只是實際顯示文檔內容的瀏覽器的一部分：它不包括瀏覽器的“外殼”（如菜單、工具條和標籤頁）。
針對架構也中顯示的文檔，是口試定了架構頁的<iframe>元素。無論在何種情況下，當討論元素的位置是，必須弄清楚所使用的座標是文檔座標還是視口座標。（注意，視口座標有事也叫作視窗座標）
如果文檔比視口要小，或者說還未出現滾動，則文檔的左上方就是視口的左上方，文檔和視口座標系統是同一個。但是一般來說，要在兩種座標系之間互相轉換，必須加上或減去滾動的位移量（scroll offset）。例如，在文檔座標中如果一個元素的Y座標是200像素，並且使用者已經把瀏覽器向下滾動了75像素，那麼視口座標中元素的Y座標就是125像素。同樣，在視口座標中如果一個元素的X座標是400像素，並且使用者已經水平滾動了視口200像素，那麼文檔座標中像素的X座標中元素的X座標就是600像素。
文檔座標比視口座標更加基礎，並且在使用者滾動是他們不會發生變化。不過，在用戶端編程中使用視口座標是非常常見的。當使用CSS指定元素的位置時運用了文檔座標。但是最簡單的查詢元素位置的方法：getBoundingClientRect()返回視口座標中的位置。類似的，當為滑鼠事件註冊事件處理常式函數時，報告的滑鼠指標的座標是在視口座標系中。
為了在座標系中轉換，我們需要判定瀏覽器視窗的捲軸的位置。Window對象的pageXoffset和pageYOffset屬性在所有的瀏覽器中提供這些值，除了IE8及更早的版本以外。IE（和所有現代瀏覽器）也可以通過scrollLeft和scrollTop屬性來獲得捲軸的位置。令人迷惑的是，正常的情況下通過尋找文檔的根節點（document.documentElement）來擷取這些屬性，但是在怪異模式下，必須在文檔的<body>元素（documeng.body）上查詢它們。以下顯示了如何簡便的查詢捲軸的位置。
functon getScrollOffsets(w){ w = w || window; var sLeft,sTop; if(w.pageXOffset != null) { sLeft = w.pageXOffset; sTop = w.pageYOffset; return {x:sLeft,y:sTop}; } if(document.compatMode == "CSS1Compat"){ sLeft = document.documentElement.scrollLeft == 0 ? document.body.scrollLeft : document.documentElement.scrollLeft; sTop = document.documentElement.scrollTop == 0 ? document.body.scrollTop : document.documentElement.scrollTop; return {x:sLeft,y:sTop}; }else if(document.compatMode == "BackCompat"){ sLeft = document.body.scrollLeft; sTop = document.body.scrollTop; return {x:sLeft,y:sTop}; }}
有時候能夠判定視口的尺寸也是非常有用的，例如，為了確定文檔的案部分是當前可見的。利用滾動位移量查詢視口的尺寸的簡單方法在IE8及更早版本中無法工作，而且該技術在IE中的運行法師還要取決於瀏覽器是否處於怪異模式還是標準模式。
window下的屬性：
innerHeight:包括捲軸在內的視窗內容部分的高度
innerWidth:包括捲軸在內的視窗內容部分的寬度
outerHeight:整個瀏覽器的高度，包括介面所有組成部分。
outerWidth:整個瀏覽器的寬度，包括介面所有組成部分。
pageXOffset:瀏覽器視窗的捲軸X軸的位置
pageYOffset:瀏覽器視窗的捲軸Y軸的位置
scrollX:瀏覽器視窗的捲軸X軸的位置
scrollY:瀏覽器視窗的捲軸Y軸的位置
屬性
document.documentElement document.body
clientHeight 視口內可見內容的大小，不包括滾動的部分和捲軸。
clientWidth
clientLeft
clientTop
offsetHeight 內容大小，並且包括捲軸。
offsetWidth
offsetLeft
offsetTop
scrollHeight 滾動內容的大小，包括滾動的部分,但不包括捲軸。
scrollWidth
scrollTop
scrollWidth
查詢時段的視口尺寸：
function getViewportSize(w){ w = w || window; var cWidth,cHeight; if(w.innerWidth != null){ cWidth = w.innerWidht; cHeight = w.innerHeight; return {w:cWidth,h:w.cHeight}; } if(document.compatMode == "CSS1Compat"){ cWidth = document.documentElement.clientWidth; cHeight = doument.documentElement.clientHeight; return {w:cWidth,h:w.cHeight}; }else if(document.compatMode == "BackCompat"){ cWidth = document.body.clientWidth; cHeight = doument.body.clientHeight; return {w:cWidth,h:w.cHeight}; }}
以上所述就是本文的全部內容了，希望大家能夠喜歡。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
