js獲取元素相對(duì)窗口位置的實(shí)現(xiàn)代碼
JS獲取元素的offsetTop,offsetLeft等屬性
obj.clientWidth //獲取元素的寬度
obj.clientHeight //元素的高度
obj.offsetLeft //元素相對(duì)于父元素的left
obj.offsetTop //元素相對(duì)于父元素的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)(相對(duì)于窗口) function getTop(e){ var offset=e.offsetTop; if(e.offsetParent!=null) offset+=getTop(e.offsetParent); return offset; } //獲取元素的橫坐標(biāo)(相對(duì)于窗口) 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屬性獲取元素相對(duì)窗口的位置,但offsetTop和offsetLeft屬性都是相對(duì)于父元素定位的,而通常需要獲取位置的元素都不是在最外層,所以遍歷上級(jí)元素的offset相關(guān)屬性少不了。那效率就成問題了。
//獲取元素的縱坐標(biāo)(相對(duì)于窗口) function getTop(e){ var offset=e.offsetTop; if(e.offsetParent!=null) offset+=getTop(e.offsetParent); return offset; } //獲取元素的橫坐標(biāo)(相對(duì)于窗口) function getLeft(e){ var offset=e.offsetLeft; if(e.offsetParent!=null) offset+=getLeft(e.offsetParent); return offset; }
好在瀏覽器給我提供了相應(yīng)的接口getBoundingClientRect,這個(gè)方法最早出現(xiàn)在IE瀏覽器中,后來的瀏覽器也跟著支持了這個(gè)方法,而且還更加完善,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是元素底部相對(duì)于窗口頂部的距離,而不是像css里面position的bottom相對(duì)于窗口底部,同理,rihgt屬性是元素最右邊相對(duì)于窗口左邊的距離。
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)載請(qǐng)注明: 轉(zhuǎn)載自前端開發(fā)
相關(guān)文章
寫入cookie的JavaScript代碼庫 cookieLibrary.js
cookieLibrary.js 寫入cookie的JavaScript代碼庫,需要的朋友可以參考下。2009-10-10詳談js中數(shù)組(array)和對(duì)象(object)的區(qū)別
下面小編就為大家?guī)硪黄斦刯s中數(shù)組(array)和對(duì)象(object)的區(qū)別。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-02-02JavaScript獲取字符串實(shí)際長(zhǎng)度(包含中英文)
這篇文章介紹了JavaScript獲取字符串實(shí)際長(zhǎng)度(包含中英文)的方法,文中通過示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-06-06JS實(shí)現(xiàn)模仿微博發(fā)布效果實(shí)例代碼
這篇文章主要介紹了JS實(shí)現(xiàn)模仿微博發(fā)布效果實(shí)例代碼,有需要的朋友可以參考一下2013-12-12