在瀏覽器中有兩種座標系統 & 滑鼠座標:
1. 相對於 `document` - 座標 (0, 0) 在整個頁面的最左上角。 2. 相對於 `window` - 座標 (0, 0) 在可視區 Viewport 的最左上角。 3. 滑鼠座標 - 通常透過事件取得。
當頁面還沒捲動時 window 和 document 的原點 (0, 0) 與其他座標是相同的。
開始捲動後,document 的座標等於 window(viewport) 的座標加上 scroll 的位置,大部分的情況下我們會使用 document 座標系統,因為它即便 scroll 了,還是會保持一致。
一個元素的座標位於該元素的左上角,不幸的是沒有屬性可以直接取得元素對應 document 的座標。不過可以透過計算 offsetTop/offsetLeft 和 offsetParent 來取得。
offsetParent 為元素的一個唯讀屬性,其值為上層最接近的有設定 position 的容器元素。更精確的說是 position 不為 static 的元素。當沒有任何 positioned 的元素時最接近的 table cell 或根元素為 offsetParent。HTML 兼容模式 body 為 offsetParent。 display: none
時 offsetParent 為 null。
一個簡單的計算方式就是遍歷所有 offsetParent 計算 offsetTop/offsetLeft。簡單說就是不斷累加自己在父元素(positioned)的座標/距離,最終到達 document 則完成計算。
functiongetOffset(el){ var top = 0, left = 0 while (el) { top += parentInt(el.offsetTop) left += parentInt(el.offsetLeft) el = el.offsetParent } return { top: top, left: left } }
這種方式有 2 個缺點:
這個方法時 w3c 標準,並且幾乎所有新版的瀏覽器都支援。它會回傳封閉該元素的一個矩形(CSS border-boxes),而這個矩形會透過物件的形式包含 top, left, right, bottom 等資料傳回。
再次強調 - 不幸的是沒有屬性可以直接取得元素對應 document 的座標。這個 getBoundingClientRect() 取得的資訊是相對於 window 不是 document。
根據 CSS 規範,任何內容都會被放置在 CSS Box 中。像是 div 這類的 Box 又稱 block box,這類的 Box 原本就是一個矩形。如果元素是 inline 的話會牽扯到 inline box,line box,containing box,contain area。就會有多個的矩形來組織。又稱 anonymous block box
/line-box.jpg
使用 getBoundingClientRect()
functiongetOffset(el){ // (1) var box = el.getBoundingClientRect() var body = document.body var docEl = document.documentElement // (2) var scrollTop = window.pageYOffset || docEl.scrollTop || body.scrollTop var scrollLeft = window.pageXOffset || docEl.scrollLeft || body.scrollLeft // (3) var clientTop = docEl.clientTop || body.clientTop || 0 var clientLeft = docEl.clientLeft || body.clientLeft || 0 // (4) var top = box.top + scrollTop - clientTop var left = box.top + scrollLeft - clientLeft return { top: Math.round(top), left: Math.round(left) } }
pageXOffset/pageYOffset
。在 IE 當宣告了 DTD i.e DOCYPTE 則 scroll 位置可以透過 documentElement(
)取得,否則就從 body 取。
2px
。因此我們要減掉。 針對 Firefox 我們需要而外使用四捨五入 Math.round()
取得已經捲動多少距離
DTD(Document Type Definition)文件類型定義,定義 XML 的元素,結構,屬性。
使用 DTD 可以讓不同的使用者在交換資料時明白其資料格式的標準,而程式可以使用 DTD 來驗證 XML 是否正確。
在 HTML 中 document.compatMode
可以得知是否宣告了 DTD,值為 BackCompat
為未宣告, CSS1Compat
為宣告 DTD。