getBoundingClientRect() 來獲取頁面元素的位置

時間 2019-11-21

標籤 getboundingclientrect 獲取頁面元素位置简体版

原文原文鏈接

仍是實際解釋下，該方法得到頁面中某個元素的左，上，右和下分別相對瀏覽器視窗的位置。也很差理解，下面用圖說明下。 html

該方法已經再也不是IE Only了，FF3.0+和Opera9.5+已經支持了該方法，能夠說在得到頁面元素位置上效率能有很大的提升，在之前版本的Opera和Firefox中必須經過循環來得到元素在頁面中的絕對位置。瀏覽器

下面的代碼舉了個簡單的例子，能夠滾動滾動條以後點紅色區域看各個值的變化。 ui

Code <!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>

有了這個方法，獲取頁面元素的位置就簡單多了， this

 var X= this.getBoundingClientRect().left+document.documentElement.scrollLeft; var Y =this.getBoundingClientRect().top+document.documentElement.scrollTop;

相關標籤/搜索

getboundingclientrect

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。