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)文章
用JavaScript實(shí)現(xiàn)仿Windows關(guān)機(jī)效果
用JavaScript實(shí)現(xiàn)仿Windows關(guān)機(jī)效果...2007-03-03javascript:history.go()和History.back()的區(qū)別及應(yīng)用
為提高用戶體驗(yàn)度,可能會(huì)使用到刷新 前進(jìn) 后退等相關(guān)更能,本文將以此問(wèn)題詳細(xì)介紹javascript:history.go()和History.back()的區(qū)別及應(yīng)用,需要的朋友可以參考下2012-11-11基于JavaScript實(shí)現(xiàn)永遠(yuǎn)加載不滿的進(jìn)度條
各位開(kāi)發(fā)大佬,平時(shí)肯定見(jiàn)到過(guò)這種進(jìn)度條吧,一直在加載,但等了好久都是在99%,那如何用JavaScript實(shí)現(xiàn)這一效果呢,下面就來(lái)和大家詳細(xì)講講2023-04-04Bootstrap實(shí)現(xiàn)登錄校驗(yàn)表單(帶驗(yàn)證碼)
本文給大家介紹使用Bootstrap新制作的一個(gè)登錄框,帶驗(yàn)證碼,帶校驗(yàn),非常不錯(cuò),具有參考借鑒價(jià)值,感興趣的朋友可以參考下2016-06-06Javascript 學(xué)習(xí)書(shū) 推薦
前一段時(shí)間看了一本javascript的書(shū),書(shū)名為Javascript DOM 高級(jí)程序設(shè)計(jì) 由【加】Jeffrey Sambells和【美】2009-06-06