Element.getBoundingClientRect()方法返回元素的大小及其相對於視口的位置。
阿新 • • 發佈:2019-02-19
Element.getBoundingClientRect()方法返回元素的大小及其相對於視口的位置。
這個方法返回一個矩形物件,包含四個屬性:left、top、right和bottom。分別表示元素各邊與頁面上邊和左邊的距離。
var box=document.getElementById('box'); // 獲取元素
alert(box.getBoundingClientRect().top); // 元素上邊距離頁面上邊的距離
alert(box.getBoundingClientRect().right); // 元素右邊距離頁面左邊的距離
alert(box.getBoundingClientRect().bottom); // 元素下邊距離頁面上邊的距離
alert(box.getBoundingClientRect().left); // 元素左邊距離頁面左邊的距離
注意:IE、Firefox3+、Opera9.5、Chrome、Safari支援,在IE中,ie7及ie7以下會多出兩個畫素,預設座標從(2,2)開始計算,導致最終距離比其他瀏覽器多出兩個畫素,我們需要做個相容。
document.documentElement.clientTop; // 非IE為0,IE為2
document.documentElement.clientLeft; // 非IE為0,IE為2