javascript getBoundingClientRect() 來(lái)獲取頁(yè)面元素的位置的代碼[修正版]第1/2頁(yè)
更新時(shí)間：2009年05月22日 00:00:59 作者：
該方法已經(jīng)不再是IE Only了，F(xiàn)F3.0+和Opera9.5+已經(jīng)支持了該方法，可以說(shuō)在獲得頁(yè)面元素位置上效率能有很大的提高，在以前版本的Opera和Firefox中必須通過(guò)循環(huán)來(lái)獲得元素在頁(yè)面中的絕對(duì)位置。
document.documentElement.getBoundingClientRect
下面這是MSDN的解釋：
Syntax
oRect = object.getBoundingClientRect()Return Value
Returns a TextRectangle object. Each rectangle has four integer properties (top, left, right, and bottom) that represent a coordinate of the rectangle, in pixels.
Remarks
This method retrieves an object that exposes the left, top, right, and bottom coordinates of the union of rectangles relative to the client's upper-left corner. In Microsoft Internet Explorer 5, the window's upper-left is at 2,2 (pixels) with respect to the true client.
還是實(shí)際解釋下，該方法獲得頁(yè)面中某個(gè)元素的左，上，右和下分別相對(duì)瀏覽器視窗的位置。也不好理解，下面用圖說(shuō)明下。
該方法已經(jīng)不再是IE Only了，F(xiàn)F3.0+和Opera9.5+已經(jīng)支持了該方法，可以說(shuō)在獲得頁(yè)面元素位置上效率能有很大的提高，在以前版本的Opera和Firefox中必須通過(guò)循環(huán)來(lái)獲得元素在頁(yè)面中的絕對(duì)位置。
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
有了這個(gè)方法，獲取頁(yè)面元素的位置就簡(jiǎn)單多了，
var X= this.getBoundingClientRect().left+document.documentElement.scrollLeft;
var Y =this.getBoundingClientRect().top+document.documentElement.scrollTop;
下面這是MSDN的解釋：
Syntax
oRect = object.getBoundingClientRect()Return Value
Returns a TextRectangle object. Each rectangle has four integer properties (top, left, right, and bottom) that represent a coordinate of the rectangle, in pixels.
Remarks
This method retrieves an object that exposes the left, top, right, and bottom coordinates of the union of rectangles relative to the client's upper-left corner. In Microsoft Internet Explorer 5, the window's upper-left is at 2,2 (pixels) with respect to the true client.
還是實(shí)際解釋下，該方法獲得頁(yè)面中某個(gè)元素的左，上，右和下分別相對(duì)瀏覽器視窗的位置。也不好理解，下面用圖說(shuō)明下。
該方法已經(jīng)不再是IE Only了，F(xiàn)F3.0+和Opera9.5+已經(jīng)支持了該方法，可以說(shuō)在獲得頁(yè)面元素位置上效率能有很大的提高，在以前版本的Opera和Firefox中必須通過(guò)循環(huán)來(lái)獲得元素在頁(yè)面中的絕對(duì)位置。
下面的代碼舉了個(gè)簡(jiǎn)單的例子，可以滾動(dòng)滾動(dòng)條之后點(diǎn)紅色區(qū)域看各個(gè)值的變化。
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
有了這個(gè)方法，獲取頁(yè)面元素的位置就簡(jiǎn)單多了，
var X= this.getBoundingClientRect().left+document.documentElement.scrollLeft;
var Y =this.getBoundingClientRect().top+document.documentElement.scrollTop;
相關(guān)文章
javascript中Date()函數(shù)在各瀏覽器中的顯示效果
本文給大家分享的是javascript中Date()函數(shù)在各瀏覽器中的顯示效果，由于各大瀏覽器的兼容性問(wèn)題，本文做了這個(gè)測(cè)試，希望有需要的小伙伴可以少走些彎路2015-06-06
javascript從image轉(zhuǎn)換為base64位編碼的String
選擇webview把image以base64位編碼的方式傳給本地應(yīng)用，就不需要再取一次圖片文件了，從而提高了速度2014-07-07
javascript中 location用于獲取或設(shè)置窗體的URL，并且可以用于解析URL，是BOM中最重要的對(duì)象之一，下面我們就來(lái)詳細(xì)探討下Location對(duì)象的使用。2015-05-05
echarts中tooltip添加點(diǎn)擊事件代碼示例
這篇文章主要給大家介紹了關(guān)于echarts中tooltip添加點(diǎn)擊事件的相關(guān)資料,echarts tooltip點(diǎn)擊事件是指當(dāng)用戶點(diǎn)擊圖表中的提示框(tooltip)時(shí)觸發(fā)的事件,需要的朋友可以參考下2023-07-07
下面小編就為大家?guī)?lái)一篇JS之相等操作符詳解。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-09-09
typescript環(huán)境安裝并開(kāi)啟VSCode自動(dòng)監(jiān)視編譯ts文件為js文件
這篇文章主要介紹了安裝typescript環(huán)境并開(kāi)啟VSCode自動(dòng)監(jiān)視編譯ts文件為js文件,本文教大家最基礎(chǔ)的安裝和配置自動(dòng)監(jiān)視ts文件編譯成js文件，需要的朋友可以參考下2022-06-06
性能優(yōu)化：簡(jiǎn)而言之，就是在不影響系統(tǒng)運(yùn)行正確性的前提下，使之運(yùn)行地更快，完成特定功能所需的時(shí)間更短，本篇文章給大家介紹js性能優(yōu)化技巧，需要的朋友參考下2015-11-11
js模擬淘寶網(wǎng)的多級(jí)選擇菜單實(shí)現(xiàn)方法
這篇文章主要介紹了js模擬淘寶網(wǎng)的多級(jí)選擇菜單實(shí)現(xiàn)方法,涉及javascript針對(duì)頁(yè)面元素結(jié)點(diǎn)的遍歷與設(shè)置等操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08
這篇文章主要為大家介紹了js評(píng)分組件的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
js實(shí)現(xiàn)動(dòng)態(tài)添加、刪除行、onkeyup表格求和示例
動(dòng)態(tài)添加、刪除行想必大家并不陌生，下面為大家介紹通過(guò)js是如何實(shí)現(xiàn)的，有此需求的朋友可不要錯(cuò)過(guò)了哈2013-08-08