搜尋

首頁 >web前端 >js教程 >使用js要如何計算元素的位置

使用js要如何計算元素的位置

青灯夜游
青灯夜游原創
2021-08-09 18:46:472582瀏覽

在先前的文章《JS數組學習之清空全部元素的4種方法（程式碼詳解）》中，我們介紹了4種JS中清空數組，刪除數組全部元素的方法。這次我們來介紹一下使用js計算元素位置的方法，有需要的可以參考參考。

在javascript中，元素的位置可以分為兩種：一種是相對於瀏覽器視窗的絕對位置；另一種是相對於父節點或 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(&#39;div3&#39;);
    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 節點的預設內外邊距去掉了）

  • div3元素左外邊框距瀏覽器視窗的距離為：div3 的left（20） div2 的左邊框寬度（3） div1 的左邊框寬度（3）=26

  • div3元素右外邊框距瀏覽器視窗的距離為：div3元素左外邊框距瀏覽器視窗的距離（26） div3的左邊框寬度（3） div3的內容寬度（50） div3的右邊框寬度（3）=26 3 50 3=82

  • div3元素上外邊框距瀏覽器視窗的距離為：div1和div2的左邊框寬度（3 3） div3的top值（10）=6 10=16

  • div3元素下外邊框距瀏覽器視窗的距離為：div3元素上外邊框距瀏覽器視窗的距離（16） div3的上邊框寬度（3） div3的內容寬度（50） div3的下邊框寬度（3）=16 3 50 3=72

#我們看看輸出結果是不是這樣的：

使用js要如何計算元素的位置

在這段程式碼中，要介紹2個重要的方法：getElementById()和getBoundingClientRect()。

getElementById()方法可以根據指定id值來取得到元素物件（該方法可傳回對擁有指定ID 的第一個物件的參考）

而元素物件的getBoundingClientRect()方法可以取得元素相對於瀏覽器視窗的位置，它會傳回一個Object 對象，該物件有6 個屬性：top、left、right、 bottom、width、height：

  • 元素物件.getBoundingClientRect().top 可傳回元素上外邊框到瀏覽器視窗上邊框的距離；

  • 元素物件.getBoundingClientRect().left 可返回元素左外邊框到瀏覽器視窗左邊框的距離；

  • #元素物件.getBoundingClientRect().right 可傳回元素右外邊框到瀏覽器視窗左邊框的距離；

  • 元素物件.getBoundingClientRect() .bottom 可傳回元素下外邊框到瀏覽器視窗上邊框的距離；

  • 元素物件.getBoundingClientRect().width 可傳回元素的寬度，其中包括左、右邊框寬度；

  • 元素物件.getBoundingClientRect().height 可傳回元素的高度，其中包含上、下邊框寬度。

2、計算相對於父節點或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(&#39;div2&#39;);
        var div4 = document.getElementById(&#39;div4&#39;);
        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 節點的預設內外邊距去掉了）

  • div2因為沒有定位父節點，所以其偏移是相對於body 節點的，則水平和垂直偏移位置都為div1的邊框寬度（3px ）等於3px。

  • div4最近的定位父節點為div3，水平偏移位置就是div3的left 屬性值（20px），垂直偏移位置就是div3的top 屬性值（10px）。

我們看看輸出結果是不是這樣的：

使用js要如何計算元素的位置

透過上面範例，我們來了解兩個屬性：offsetLeft 和offsetTop。

offsetLeft 和 offsetTop屬性可以分別取得元素相對定位父元素或 body 元素的水平和垂直偏移位置。

【推薦學習：javascript進階教學】

#

以上是使用js要如何計算元素的位置的詳細內容。更多資訊請關注PHP中文網其他相關文章！

JavaScript Object JS 对象 外边距
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：你知道JavaScript中的可迭代物件與迭代器嗎下一篇：你知道JavaScript中的可迭代物件與迭代器嗎

相關文章

看更多