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