javascript 獲取元素位置的快速方法 getBoundingClientRect()
更新時(shí)間：2009年11月26日 00:40:31 作者：
有一種快速獲得網(wǎng)頁(yè)元素的位置。那就是使用getBoundingClientRect()方法。
它返回一個(gè)對(duì)象，其中包含了left、right、top、bottom四個(gè)屬性，分別對(duì)應(yīng)了該元素的左上角和右下角相對(duì)于瀏覽器窗口（viewport）左上角的距離。
所以，網(wǎng)頁(yè)元素的相對(duì)位置就是
var X= this.getBoundingClientRect().left;
var Y =this.getBoundingClientRect().top;
再加上滾動(dòng)距離，就可以得到絕對(duì)位置
var X= this.getBoundingClientRect().left+document.documentElement.scrollLeft;
var Y =this.getBoundingClientRect().top+document.documentElement.scrollTop;
目前，IE、Firefox 3.0+、Opera 9.5+都支持該方法，而Firefox 2.x、Safari、Chrome、Konqueror不支持。
所以，網(wǎng)頁(yè)元素的相對(duì)位置就是
var X= this.getBoundingClientRect().left;
var Y =this.getBoundingClientRect().top;
再加上滾動(dòng)距離，就可以得到絕對(duì)位置
var X= this.getBoundingClientRect().left+document.documentElement.scrollLeft;
var Y =this.getBoundingClientRect().top+document.documentElement.scrollTop;
目前，IE、Firefox 3.0+、Opera 9.5+都支持該方法，而Firefox 2.x、Safari、Chrome、Konqueror不支持。
相關(guān)文章
微信小程序獲取用戶手機(jī)號(hào)碼詳細(xì)教程(前端＋后端)
在我們開(kāi)發(fā)微信小程序時(shí),獲取用戶手機(jī)號(hào)碼是常見(jiàn)的需求之一,這篇文章主要給大家介紹了關(guān)于微信小程序獲取用戶手機(jī)號(hào)碼的相關(guān)資料,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下2024-02-02
基于JavaScript實(shí)現(xiàn)動(dòng)態(tài)創(chuàng)建表格和增加表格行數(shù)
這篇文章主要介紹了基于JavaScript實(shí)現(xiàn)動(dòng)態(tài)創(chuàng)建表格和增加表格行數(shù)的相關(guān)資料,需要的朋友可以參考下2015-12-12
這篇文章主要介紹了詳解js中class的多種函數(shù)封裝方法，介紹了不同函數(shù)的封裝方法，感興趣的朋友可以參考一下2016-01-01
innertext , insertadjacentelement , insertadjacenthtml , ins
innertext , insertadjacentelement , insertadjacenthtml , insertadjacenttext 等區(qū)別...2007-06-06
Bootstrap 實(shí)現(xiàn)查詢的完美方法
Bootstrap，來(lái)自 Twitter，是目前最受歡迎的前端框架。這篇文章主要介紹了Bootstrap 實(shí)現(xiàn)查詢的完美方法,需要的朋友可以參考下2016-10-10
Prototype是一個(gè)JavaScript框架，旨在簡(jiǎn)化動(dòng)態(tài)Web應(yīng)用程序的開(kāi)發(fā)。原型被稱為作為一個(gè)單一的文件分發(fā)的prototype.js，本文給大家介紹prototype框架，感興趣的朋友一起學(xué)習(xí)吧2015-11-11
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)簽到日歷，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08
大家注意看下，感覺(jué)應(yīng)該是批量給網(wǎng)頁(yè)的一些標(biāo)簽加樣式的函數(shù)。2009-05-05
JavaScript實(shí)現(xiàn)單英文金山打字通
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)單英文金山打字通，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-06-06
高性能Javascript筆記 數(shù)據(jù)的存儲(chǔ)與訪問(wèn)性能優(yōu)化
在JavaScript中，數(shù)據(jù)的存儲(chǔ)位置對(duì)代碼的整體性能有著重要的影響。有四種數(shù)據(jù)訪問(wèn)類型：直接量，局部變量，數(shù)組項(xiàng)，對(duì)象成員2012-08-08