站長(zhǎng)資訊網(wǎng)在之前的文章《JS數(shù)組學(xué)習(xí)之清空全部元素的4種方法（代碼詳解）》中，我們介紹了4種JS中清空數(shù)組，刪除數(shù)組全部元素的方法。這次我們來(lái)介紹一下使用js計(jì)算元素位置的方法，有需要的可以參考參考。
在javascript中，元素的位置可以分為兩種：一種是相對(duì)于瀏覽器視窗的絕對(duì)位置；另一種是相對(duì)于父節(jié)點(diǎn)或 body 元素的偏移位置。下面我們就來(lái)了解一下獲取兩種元素位置的方法。
1、js計(jì)算相對(duì)于瀏覽器視窗的元素絕對(duì)位置
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>獲取元素的絕對(duì)位置</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é)點(diǎn)的默認(rèn)內(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個(gè)重要的方法：getElementById()和getBoundingClientRect()。
getElementById()方法可以根據(jù)指定id值來(lái)獲取到元素對(duì)象（該方法可返回對(duì)擁有指定 ID 的第一個(gè)對(duì)象的引用）
而元素對(duì)象的getBoundingClientRect()方法可以獲取元素相對(duì)于瀏覽器視窗的位置，它會(huì)返回一個(gè) Object 對(duì)象，該對(duì)象有 6 個(gè)屬性：top、left、right、bottom、width、height：
-
元素對(duì)象.getBoundingClientRect().top可返回元素上外邊框到瀏覽器視窗上邊框的距離； -
元素對(duì)象.getBoundingClientRect().left可返回元素左外邊框到瀏覽器視窗左邊框的距離； -
元素對(duì)象.getBoundingClientRect().right可返回元素右外邊框到瀏覽器視窗左邊框的距離； -
元素對(duì)象.getBoundingClientRect().bottom可返回元素下外邊框到瀏覽器視窗上邊框的距離； -
元素對(duì)象.getBoundingClientRect().width可返回元素的寬度，其中包括左、右邊框?qū)挾龋?/p> -
元素對(duì)象.getBoundingClientRect().height可返回元素的高度，其中包括上、下邊框?qū)挾取?/p>
2、計(jì)算相對(duì)于父節(jié)點(diǎn)或 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é)點(diǎn)的默認(rèn)內(nèi)外邊距去掉了）
-
div2因?yàn)闆](méi)有定位父節(jié)點(diǎn)，所以其偏移是相對(duì)于 body 節(jié)點(diǎn)的，則水平和垂直偏移位置都為div1的邊框?qū)挾龋?px）等于3px。
-
div4最近的定位父節(jié)點(diǎn)為div3，水平偏移位置就是div3的left 屬性值（20px），垂直偏移位置就是div3的top 屬性值（10px）。
我們看看輸出結(jié)果是不是這樣的：
通過(guò)上面示例，我們來(lái)了解兩個(gè)屬性：offsetLeft 和 offsetTop。
offsetLeft 和 offsetTop屬性可以分別獲取元素相對(duì)定位父元素或 body 元素的水平和垂直偏移位置。
【推薦學(xué)習(xí)：javascript高級(jí)教程】
