站長資訊網(wǎng)在之前的文章《JS數(shù)組學習之清空全部元素的4種方法（代碼詳解）》中，我們介紹了4種JS中清空數(shù)組，刪除數(shù)組全部元素的方法。這次我們來介紹一下使用js計算元素位置的方法，有需要的可以參考參考。
在javascript中，元素的位置可以分為兩種：一種是相對于瀏覽器視窗的絕對位置；另一種是相對于父節(jié)點或 body 元素的偏移位置。下面我們就來了解一下獲取兩種元素位置的方法。
1、js計算相對于瀏覽器視窗的元素絕對位置
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>獲取元素的絕對位置</title> <style> *{ margin: 0; padding: 0; } #div1{width:100px;height:100px;border:3px solid red;} #div2{width:70px;height:70px;border:3px solid blue;position:relative;} #div3{width:50px;height:50px;border:3px solid green;position:absolute; left:20px;top:10px;} </style> </head> <body> <div id="div1"> <div id="div2"> <div id="div3"></div> </div> </div> <script> var div3 = document.getElementById('div3'); div3.getBoundingClientRect().bottom+"px"; console.log("div3元素左外邊框距瀏覽器視窗的距離為："); console.log(div3.getBoundingClientRect().left); console.log("div3元素右外邊框距瀏覽器視窗的距離為："); console.log(div3.getBoundingClientRect().right); console.log("div3元素上外邊框距瀏覽器視窗的距離為："); console.log(div3.getBoundingClientRect().top); console.log(" div3元素下外邊框距瀏覽器視窗的距離為"); console.log(div3.getBoundingClientRect().bottom); </script> </body> </html>
分析：（前提，將body 節(jié)點的默認內(nèi)外邊距去掉了）
-
div3元素左外邊框距瀏覽器視窗的距離為：div3 的 left（20）+div2 的左邊框?qū)挾龋?）+div1 的左邊框?qū)挾龋?）=26
-
div3元素右外邊框距瀏覽器視窗的距離為：div3元素左外邊框距瀏覽器視窗的距離（26）+div3的左邊框?qū)挾龋?）+div3的內(nèi)容寬度（50）+div3的右邊框?qū)挾龋?）=26+3+50+3=82
-
div3元素上外邊框距瀏覽器視窗的距離為：div1和div2的左邊框?qū)挾龋?+3）+div3的top值（10）=6+10=16
-
div3元素下外邊框距瀏覽器視窗的距離為：div3元素上外邊框距瀏覽器視窗的距離（16）+div3的上邊框?qū)挾龋?）+div3的內(nèi)容寬度（50）+div3的下邊框?qū)挾龋?）=16+3+50+3=72
我們看看輸出結(jié)果是不是這樣的：
在這段代碼中，要介紹2個重要的方法：getElementById()和getBoundingClientRect()。
getElementById()方法可以根據(jù)指定id值來獲取到元素對象（該方法可返回對擁有指定 ID 的第一個對象的引用）
而元素對象的getBoundingClientRect()方法可以獲取元素相對于瀏覽器視窗的位置，它會返回一個 Object 對象，該對象有 6 個屬性：top、left、right、bottom、width、height：
-
元素對象.getBoundingClientRect().top可返回元素上外邊框到瀏覽器視窗上邊框的距離； -
元素對象.getBoundingClientRect().left可返回元素左外邊框到瀏覽器視窗左邊框的距離； -
元素對象.getBoundingClientRect().right可返回元素右外邊框到瀏覽器視窗左邊框的距離； -
元素對象.getBoundingClientRect().bottom可返回元素下外邊框到瀏覽器視窗上邊框的距離； -
元素對象.getBoundingClientRect().width可返回元素的寬度，其中包括左、右邊框?qū)挾龋?/p> -
元素對象.getBoundingClientRect().height可返回元素的高度，其中包括上、下邊框?qū)挾取?/p>
2、計算相對于父節(jié)點或 body 元素的偏移位置
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>獲取元素的偏移位置</title> <style> *{ margin: 0; padding: 0; } #div1{width:100px;height:100px;border:3px solid red;} #div2{width:70px;height:70px;border:3px solid blue;position:relative;} #div3{width:50px;height:50px;border:3px solid green;position:absolute;left:20px; top:10px;} #div4{width:30px;height:30px;border:3px solid olive;position:absolute;left:20px; top:10px;} </style> </head> <body> <div id="div1"> <div id="div2"> <div id="div3"> <div id="div4"><div> </div> </div> </div><br /><br /><br /><br /> <div id="content"></div> <script> var div2 = document.getElementById('div2'); var div4 = document.getElementById('div4'); console.log("div2的水平偏移位置為："); console.log(div2.offsetLeft); console.log("div4的水平偏移位置為："); console.log(div4.offsetLeft); console.log("div2的垂直偏移位置為："); console.log(div2.offsetTop); console.log("div4的垂直偏移位置為："); console.log(div4.offsetTop); </script> </body> </html>
分析：（前提，將body 節(jié)點的默認內(nèi)外邊距去掉了）
-
div2因為沒有定位父節(jié)點，所以其偏移是相對于 body 節(jié)點的，則水平和垂直偏移位置都為div1的邊框?qū)挾龋?px）等于3px。
-
div4最近的定位父節(jié)點為div3，水平偏移位置就是div3的left 屬性值（20px），垂直偏移位置就是div3的top 屬性值（10px）。
我們看看輸出結(jié)果是不是這樣的：
通過上面示例，我們來了解兩個屬性：offsetLeft 和 offsetTop。
offsetLeft 和 offsetTop屬性可以分別獲取元素相對定位父元素或 body 元素的水平和垂直偏移位置。
【推薦學習：javascript高級教程】
