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來獲取當前滾動位置。
