Element.getBoundingClientRect()返回元素的大小及相對於視窗的位置 語法: rectObject=object.getBoundingClientRect(); 返回值是一個DOMRect對象,即DOMRect={x:scrollLeft,y:scrollY,width: ...
Element.getBoundingClientRect()返回元素的大小及相對於視窗的位置
語法:
rectObject=object.getBoundingClientRect();
返回值是一個DOMRect對象,即DOMRect={x:scrollLeft,y:scrollY,width:val1,height:val2,top:topPosition,left:leftPosition,bottom:bottomPosition,right:rightPosition}共8個屬性。
相容性:
[1] CSS spec for 'use' element 規定了用於 <use>
元素的 'symbol' 元素要設置預設的 width 和 height 為 100%。spec for width and height 'svg' attributes 也要求將 100% 作為預設值。Google Chrome 沒有遵循這些規定。同時 Chrome 也不會將 stroke-width
加入計算。所以 Chrome 和 Firefox 瀏覽器的 getBoundingClientRect()
返回的可能是不同的。
[2] 在IE8或者更低瀏覽器版本中,getBoudingClientRect()方法返回的TextRectangle對象沒有height和width屬性。同時,額外的屬性(包括height和width)也不能添加到TextRectangle對象中去。
[3] Gecko 1.9.1 將 width
和 height 屬性
加入到 DOMRect
對象中。
從 Gecko 12.0(Firefox 12.0 / Thunderbird 12.0 / SeaMonkey 2.9) 開始,計算元素的邊界矩形會將 CSS transforms 考慮進來。
[4] IE 和 Edge 返回的是一個不包含 x, y 屬性的 MSDN: ClientRect
對象
在計算邊界矩形,會考慮視口區域(或其他滾動操作)內的滾動操作,當滾動位置發生改變時,四個角的屬性值也會發生改變,因此他們的值是相對於視口的不是絕對的,如果你需要相對於整個網頁左上角定位的屬性值,只需要給四個角的屬性值加上當前的滾動位置,在支持返回支持x,y屬性的瀏覽器中,只需要用四個角的屬性值減去x,y的屬性值,即可獲得與當前滾動位置無關的值。或者通過window.scrollX 和window.scrrollY來獲取當前滾動位置。