jsを使って要素の位置を計算する方法-jsチュートリアル-php.cn

jsを使って要素の位置を計算する方法

青灯夜游

リリース： 2021-08-09 19:40:55

オリジナル

2547 人が閲覧しました

前回の記事「JS配列学習：全要素をクリアする4つの方法（詳細コード解説）」では、JSで配列をクリアして配列の全要素を削除する4つの方法を紹介しました。今回はjsを使って要素の位置を計算する方法を紹介しますので、必要に応じて参考にしてください。

JavaScript では、要素の位置は 2 つのタイプに分類できます: 1 つはブラウザウィンドウを基準とした絶対位置、もう 1 つは親ノードまたは body 要素を基準としたオフセット位置です。 2 つの要素の位置を取得する方法を見てみましょう。

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>

ログイン後にコピー

分析: (前提条件として、ボディノードのデフォルトの内側と外側のマージンは削除されました)

div3 要素の左外側境界線とブラウザウィンドウの間の距離は次のとおりです: div3 の左境界線 (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 の上の値 (10) = 6 10 = 16
div3 要素の下側の外枠とブラウザウィンドウとの間の距離は次のとおりです。 div3 要素の上側の外枠とブラウザとの間の距離ビューウィンドウの距離 (16) div3 の上枠の幅(3) div3 の内容の幅 (50) div3 の下枠の幅 (3) = 16 3 50 3 = 72

## 見てみましょう出力結果が次のようになっているか確認してください次のようになります。

jsを使って要素の位置を計算する方法

このコードでは、getElementById() と getBoundingClientRect() という 2 つの重要なメソッドが導入されています。

getElementById()このメソッドは、指定された id 値 に基づいて要素オブジェクトを取得できます (このメソッドは、指定された ID を持つ最初のオブジェクトへの参照を返すことができます)

要素オブジェクトの

getBoundingClientRect() メソッドは、ブラウザウィンドウを基準とした要素の位置を取得できます。このメソッドは、top、left、6 つのプロパティを持つ Object オブジェクトを返します。右、下、幅、高さ:

Element object.getBoundingClientRect().top 要素の上部の外側の境界線から上部の境界線までの距離を返すことができますブラウザウィンドウの;
Element object.getBoundingClientRect().left は、要素の左外枠からブラウザの左枠までの距離を返すことができます。 window;
Element object.getBoundingClientRect().right 要素の右外枠からブラウザウィンドウの左枠までの距離を返すことができます;
Element object.getBoundingClientRect() .bottom は、要素の下端の外枠からブラウザウィンドウの上端までの距離を返すことができます。
要素 object.getBoundingClientRect().width は、左右の境界線の幅を含む要素の幅の距離を返すことができます。 Element object.getBoundingClientRect().height
上下の境界線の幅を含む要素の高さを返します。
2. 親ノードまたはボディ要素を基準としたオフセット位置を計算します。

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

ログイン後にコピー

#親ノードが配置されていないため、div2 のオフセットはボディノードを基準にしているため、水平方向と垂直方向のオフセット位置は両方ともdiv1 (3px) の境界線の幅は 3px に等しくなります。

上記の例を通じて、2 つのことを理解します。属性:offsetLeft および offsetTop。

jsを使って要素の位置を計算する方法 offsetLeft
プロパティと