js獲取元素相對(duì)窗口位置的實(shí)現(xiàn)代碼_javascript技巧

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的寬度

之前也寫過一篇JS關(guān)于獲取元素位置的文章：JS獲取元素的offsetTop,offsetLeft等屬性，我們可以通過offsetTop和offsetLeft屬性獲取元素相對(duì)窗口的位置，但offsetTop和offsetLeft屬性都是相對(duì)于父元素定位的，而通常需要獲取位置的元素都不是在最外層，所以遍歷上級(jí)元素的offset相關(guān)屬性少不了。那效率就成問題了。

好在瀏覽器給我提供了相應(yīng)的接口getBoundingClientRect，這個(gè)方法最早出現(xiàn)在IE瀏覽器中，后來的瀏覽器也跟著支持了這個(gè)方法，而且還更加完善，IE中只能獲取到元素的left,top,bottom,right的屬性，而后面的現(xiàn)代瀏覽器還能獲取到元素的width和

這里要注意的是，bottom是元素底部相對(duì)于窗口頂部的距離，而不是像css里面position的bottom相對(duì)于窗口底部，同理，rihgt屬性是元素最右邊相對(duì)于窗口左邊的距離。

原創(chuàng)文章，轉(zhuǎn)載請(qǐng)注明： 轉(zhuǎn)載自前端開發(fā)

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com