獲取元素位置可以用 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;