js獲取元素相對窗口位置的實現(xiàn)代碼
JS獲取元素的offsetTop,offsetLeft等屬性
obj.clientWidth //獲取元素的寬度
obj.clientHeight //元素的高度
obj.offsetLeft //元素相對于父元素的left
obj.offsetTop //元素相對于父元素的top
obj.offsetWidth //元素的寬度
obj.offsetHeight //元素的高度
區(qū)別：
clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = width + padding + border
offset比client多了border的寬度
//獲取元素的縱坐標(biāo)（相對于窗口）
function getTop(e){
var offset=e.offsetTop;
if(e.offsetParent!=null) offset+=getTop(e.offsetParent);
return offset;
}
//獲取元素的橫坐標(biāo)（相對于窗口）
function getLeft(e){
var offset=e.offsetLeft;
if(e.offsetParent!=null) offset+=getLeft(e.offsetParent);
return offset;
}
之前也寫過一篇JS關(guān)于獲取元素位置的文章：JS獲取元素的offsetTop,offsetLeft等屬性，我們可以通過offsetTop和offsetLeft屬性獲取元素相對窗口的位置，但offsetTop和offsetLeft屬性都是相對于父元素定位的，而通常需要獲取位置的元素都不是在最外層，所以遍歷上級元素的offset相關(guān)屬性少不了。那效率就成問題了。
//獲取元素的縱坐標(biāo)（相對于窗口）
function getTop(e){
var offset=e.offsetTop;
if(e.offsetParent!=null) offset+=getTop(e.offsetParent);
return offset;
}
//獲取元素的橫坐標(biāo)（相對于窗口）
function getLeft(e){
var offset=e.offsetLeft;
if(e.offsetParent!=null) offset+=getLeft(e.offsetParent);
return offset;
}
好在瀏覽器給我提供了相應(yīng)的接口getBoundingClientRect，這個方法最早出現(xiàn)在IE瀏覽器中，后來的瀏覽器也跟著支持了這個方法，而且還更加完善，IE中只能獲取到元素的left,top,bottom,right的屬性，而后面的現(xiàn)代瀏覽器還能獲取到元素的width和
| Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|
| 1.0 | 3.0 (1.9) | 4.0 | (Yes) | 4.0 |
這里要注意的是，bottom是元素底部相對于窗口頂部的距離，而不是像css里面position的bottom相對于窗口底部，同理，rihgt屬性是元素最右邊相對于窗口左邊的距離。
var box = document.getElementById("box");
var pos = box.getBoundingClientRect();
box.innerHTML = "top:"+pos.top +
"left:"+pos.left +
"bottom:"+pos.bottom +
"right:"+pos.right +
"width:"+pos.width +
"height:"+pos.height
原創(chuàng)文章，轉(zhuǎn)載請注明： 轉(zhuǎn)載自前端開發(fā)
相關(guān)文章
最近學(xué)到一個有關(guān)深拷貝的實現(xiàn)方法,為加深印象,這里給大家分享一下,下面這篇文章主要給大家介紹了關(guān)于前端面試的底氣之實現(xiàn)一個深拷貝的相關(guān)資料,需要的朋友可以參考下2022-05-05
微信小程序?qū)崿F(xiàn)二維碼簽到考勤系統(tǒng)
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)二維碼簽到考勤系統(tǒng)，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2020-01-01
這篇文章主要介紹了關(guān)于JS中的作用域中的問題思考分享，scope和?closure是?javascript中兩個非常關(guān)鍵的概念，前者JS用多了還比較好理解而且容易體會到，而?closure就不一樣了。這玩意是真的很容易迷糊,需要的朋友可以參考下2022-04-04
webpack-url-loader 解決項目中圖片打包路徑問題
這篇文章主要介紹了webpack-url-loader 解決項目中圖片打包路徑問題,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
JavaScript使用readAsDataURL讀取圖像文件
這篇文章主要為大家詳細介紹了JavaScript使用readAsDataURL讀取圖像文件的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
我們平時在寫代碼的過程中，好像很少需要自己手動進行垃圾回收，那么V8是如何來減少內(nèi)存占用，從而避免內(nèi)存溢出而導(dǎo)致程序崩潰的情況的，為了更高效地回收垃圾，V8引入了兩個垃圾回收器，它們分別針對不同場景進行工作2023-06-06
深入理解JS中attribute和property的區(qū)別
property 和 attribute非常容易混淆，但實際上，二者是不同的東西，屬于不同的范疇，本文就詳細的介紹一下JS中attribute和property的區(qū)別 ，感興趣的可以了解一下2022-02-02
在編寫JavaScript應(yīng)用的時候，我們經(jīng)常會使用this關(guān)鍵字。那么this關(guān)鍵字究竟是怎樣工作的，它的設(shè)計有哪些好的地方，有哪些不好的地方，本文帶大家全面系統(tǒng)地認識這個老朋友，感興趣的小伙伴可以借鑒閱讀2023-05-05
使用js模擬類繼承小例子，學(xué)習(xí)js面向?qū)ο蟮呐笥芽梢詤⒖枷隆?/div> 2010-07-07
瀏覽器目前來說是沒有抗鋸齒效果的(將來不一定哦)，這樣dom元素外觀的改變就被限制在1個像素為最佳效果。2009-09-09最新評論