getBoundingClientRect方法獲取元素在頁面中的相對位置

雨霖月寒發表於2018-04-25

獲取元素位置可以用 offset 或 getBoundingClientRect,使用 offset 因為相容性不好,比較麻煩,offset獲取位置會形成“回溯”。而 getBoundingClientRect 方法則
相容性較好,基本所有的瀏覽器都支援了,且使用起來更容易和簡單。

1.使用語法:

element.getBoundingClientRect();

方法中沒有任何引數,返回值為物件型別。

 

2.在IE8及以下的瀏覽器中,返回值物件包含的屬性值有:

top::元素上邊緣距離文件頂部的距離;

right: 元素右邊緣距離文件左邊的距離;

bottom:元素下邊緣距離文件頂部的距離;

left:元素左邊緣距離文件左邊的距離;

 

3.在IE9以上、谷歌、火狐等瀏覽器中,返回值物件包含的屬性值有:

top: 元素上邊緣距離文件頂部的距離;

right:元素右邊緣距離文件左邊的距離;

bottom:元素下邊緣距離文件頂部的距離;

left:元素左邊緣距離文件左邊的距離;

width:元素的寬度(包含 padding 和 border)

height:元素的高度(包含 padding 和 border)

 

4.在IE8及以下瀏覽器沒有 width 和 height 屬性的解決方法:

在IE8及以下瀏覽器中,可以通過計算得到元素的寬和高:

如:

var dom = document.querySelector("#demo"),
r = dom.getBoundingClientRect();

var width = r.right - r.left;
var height = r.bottom - r.top;

 

相關文章