js getBoundingClientRect() 來(lái)獲取頁(yè)面元素的位置
下面這是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è)值的變化。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Demo</title>
</head>
<body style="width:2000px; height:1000px;">
<div id="demo" style="position:absolute; left:518px; right:100px; width:500px; height:500px; background:#CC0000; top: 114px;">Demo為了方便就直接用絕對(duì)定位的元素</div>
</body>
</html>
<script>
document.getElementById('demo').onclick=function (){
if (document.documentElement.getBoundingClientRect) {
alert("left:"+this.getBoundingClientRect().left)
alert("top:"+this.getBoundingClientRect().top)
alert("right:"+this.getBoundingClientRect().right)
alert("bottom:"+this.getBoundingClientRect().bottom)
var X= this.getBoundingClientRect().left+document.documentElement.scrollLeft;
var Y = this.getBoundingClientRect().top+document.documentElement.scrollTop;
alert("Demo的位置是X:"+X+";Y:"+Y)
}
}
</script>
有了這個(gè)方法，獲取頁(yè)面元素的位置就簡(jiǎn)單多了，
var X= this.getBoundingClientRect().left+document.documentElement.scrollLeft;
var Y =this.getBoundingClientRect().top+document.documentElement.scrollTop;
相關(guān)文章
解決function函數(shù)內(nèi)的循環(huán)變量
鼠標(biāo)放到指定的行上自動(dòng)彈出當(dāng)前的個(gè)數(shù)，從0開(kāi)始，這個(gè)功能方便我們?cè)趖ab切換中定位2008-10-10
下面小編就為大家?guī)?lái)一篇老生常談 js中this的指向。小編覺(jué)得挺不錯(cuò)的， 現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06
這篇文章主要介紹了使用js繪制幾何圖形教程，本文主要是教大家繪制圓、弧、扇形,需要的朋友可以參考下2015-01-01
很多新手朋友們都不知道js怎么導(dǎo)出txt，下面有個(gè)不錯(cuò)的示例，大家可以參考下2014-01-01
js實(shí)現(xiàn)對(duì)table的增加行和刪除行的操作方法
下面小編就為大家?guī)?lái)一篇js實(shí)現(xiàn)對(duì)table的增加行和刪除行的操作方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10
js實(shí)現(xiàn)帶緩動(dòng)動(dòng)畫的導(dǎo)航欄效果
本篇文章主要分享了js實(shí)現(xiàn)帶緩動(dòng)動(dòng)畫的導(dǎo)航欄效果的示例代碼。具有一定的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-01-01
詳解uniapp分包的實(shí)現(xiàn)方式及優(yōu)點(diǎn)
當(dāng)今移動(dòng)應(yīng)用開(kāi)發(fā)領(lǐng)域,隨著用戶對(duì)于應(yīng)用功能和體驗(yàn)的要求不斷提高,應(yīng)用程序的復(fù)雜度也在不斷增加,在這種情況下,應(yīng)用程序的體積也隨之增大,為了解決這個(gè)問(wèn)題,Uniapp提供了分包功能,本文將詳細(xì)介紹Uniapp分包的功能和優(yōu)勢(shì),包括如何通過(guò)配置文件實(shí)現(xiàn)分包2023-09-09
下面小編就為大家?guī)?lái)一篇js中遍歷對(duì)象的屬性和值的方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-07-07
javascript獲取隱藏元素(display:none)的高度和寬度的方法
這篇文章主要介紹了javascript獲取隱藏元素(display:none)的高度和寬度的方法,實(shí)現(xiàn)方法比較復(fù)雜,需要的朋友可以參考下2014-06-06
RequireJS以一個(gè)相對(duì)于baseUrl的地址來(lái)加載所有的代碼。接下來(lái)通過(guò)本文給大家分享RequireJs官方使用教程，感興趣的朋友一起看看吧2017-10-10