獲取元素相對瀏覽器視窗的偏移座標

2022-04-10 14:49:35 字數 1768 閱讀 6587

元素座標:

*在瀏覽器中存在兩個座標系統:*

相對文件——座標遠點在頁面的左上角

相對視覺化視窗——座標原點在可視視窗的左上角

1. 座標系統

當頁面沒有滾動時,視窗和頁面共享相同的座標原點,如下圖所示:

滾動後,頁面相對可視視窗發生了偏移如下圖:

事實上,在這兩種座標系統間相互轉化很簡單,頁面座標是視窗座標加上頁面滾動偏移

大部分時候,僅僅使用頁面座標,因為他們滾動後維持相同。

2. 使用offsetparent屬性獲取元素的座標

元素的座標是元素左上角的座標,不幸的是沒有乙個單一的屬性可以獲取到它的值,但可以是喲個offsettop/offsetleft和offsetparent計算它的值。

一種計算元素的絕對座標的方式是遍歷offsetparent鏈,並對遍歷中的每個定位父元素的offsetleft/offsettop求和,如下所示:

function getoffsetsum(elem) 

return

}

但這種方式有兩個缺陷:

1. 它存在bug,不同的瀏覽器存在不同的問題,當考慮邊框和滾動的時候會出現問題。

2. 它計算起來很慢,每次都要遍歷整個offsetparents鏈

可以寫乙個跨瀏覽器修復bug的方法,但先讓我們來看另外一種標準做法,該方法在ie6+,firefox3+ opera ,和safrari及chrome中也支援

3. 正確的方式:elem.getboundingclientrect

這個方式在w3c標準下有描述,大多數現代瀏覽器都支援,包括ie

它返回乙個包裹元素的矩形框,這個矩形框以top , left , right , bottom四個屬性給出。

這四個數字代表了矩形的左上角和右下角的四個座標,例如:

這個座標是相對視窗,而不是相對文件。

讓我們來看乙個新版本的計算座標的方式:使用getboundingclientrect

function getoffsetrect(elem) 

}

計算步驟如下:

獲取到包含的矩形框

計算頁面的滾動,除了ie<9外,所有瀏覽器都支援pagexoffset / pageyoffset,在ie中,當設定了doctype時,滾動的值可以通過documentelement獲得,否則使用body物件獲取。

在ie中文件會相對左上角偏移幾個畫素,需要去掉它,減去clienttop和clientleft

矩形框的座標加上頁面相對視窗滾動的座標,減去偏移的座標,就得到了元素相對整個文件的座標。

4. 跨瀏覽器相容的解決方案:

有很多js庫結合兩種方式,獲取元素的座標:

function getoffset(elem)  else 

}

瀏覽器視口大小 HTML元素偏移量的獲取

這個函式首先檢查document.compatmode屬性,確定瀏覽器是否執行在混雜模式。大多數瀏覽器都執行在標準模式下,所以會自動執行else function getviewport else 下面函式可以準確獲得元素相對於document的 左 偏移量,如果想得到上偏移量,只需將 中所有的of...

JS 獲取瀏覽器視窗大小

js 獲取瀏覽器視窗大小 獲取視窗寬度 if window.innerwidth winwidth window.innerwidth else if document.body document.body.clientwidth winwidth document.body.clientwidth...

JS 獲取瀏覽器視窗大小

js 獲取瀏覽器視窗大小 js 獲取瀏覽器視窗大小 獲取視窗寬度 if window.innerwidth winwidth window.innerwidth else if document.body document.body.clientwidth winwidth document.bod...