js 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)來獲得元素在頁面中的絕對位置。
下面的代碼舉了個簡單的例子,可以滾動滾動條之后點紅色區(qū)域看各個值的變化。
<!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為了方便就直接用絕對定位的元素</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>
有了這個方法,獲取頁面元素的位置就簡單多了,
var X= this.getBoundingClientRect().left+document.documentElement.scrollLeft;
var Y =this.getBoundingClientRect().top+document.documentElement.scrollTop;
相關文章
用JavaScript實現(xiàn)仿Windows關機效果
用JavaScript實現(xiàn)仿Windows關機效果...2007-03-03javascript:history.go()和History.back()的區(qū)別及應用
為提高用戶體驗度,可能會使用到刷新 前進 后退等相關更能,本文將以此問題詳細介紹javascript:history.go()和History.back()的區(qū)別及應用,需要的朋友可以參考下2012-11-11基于JavaScript實現(xiàn)永遠加載不滿的進度條
各位開發(fā)大佬,平時肯定見到過這種進度條吧,一直在加載,但等了好久都是在99%,那如何用JavaScript實現(xiàn)這一效果呢,下面就來和大家詳細講講2023-04-04