Comment calculer la position d'un élément en utilisant js-js tutoriel-php.cn

Dans l'article précédent "Apprentissage des tableaux JS : 4 méthodes pour effacer tous les éléments (explication détaillée du code) ", nous avons présenté 4 façons d'effacer les tableaux et de supprimer tous les éléments des tableaux dans JS. Cette fois, nous allons vous présenter comment utiliser js pour calculer la position des éléments. Vous pouvez vous y référer si nécessaire.

En JavaScript, la position d'un élément peut être divisée en deux types : l'un est la position absolue par rapport à la fenêtre du navigateur ; l'autre est la position de décalage par rapport au nœud parent ou à l'élément de corps. Voyons comment obtenir les positions des deux éléments.

1.js calcule la position absolue de l'élément par rapport à la fenêtre du navigateur

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

Copier après la connexion

Analyse : (Prérequis, les marges intérieure et extérieure par défaut du nœud du corps sont supprimées)

La distance entre la gauche bordure extérieure de l'élément div3 et de la fenêtre du navigateur La distance est : gauche de div3 (20) + largeur de bordure gauche de div2 (3) + largeur de bordure gauche de div1 (3) = 26
La distance entre la bordure extérieure droite de l'élément div3 et la fenêtre du navigateur. L'élément div3 et la fenêtre du navigateur sont : la gauche de l'élément div3 La distance entre la bordure extérieure et la fenêtre du navigateur (26) + la largeur de la bordure gauche de div3 (3) + la largeur du contenu de div3 (50) + la bordure droite largeur de div3 (3) = 26 + 3 + 50 + 3 = 82
La distance entre la bordure extérieure supérieure de l'élément div3 et la fenêtre du navigateur est : la largeur de la bordure gauche de div1 et div2 (3+3) + la valeur supérieure de div3 (10) = 6+10 = 16
La distance entre la bordure extérieure inférieure de l'élément div3 La distance de la fenêtre du navigateur est : la distance entre la bordure extérieure supérieure de l'élément div3 et la fenêtre du navigateur (16) + la largeur de la bordure supérieure de div3 (3) + la largeur du contenu de div3 (50) + la largeur de la bordure inférieure de div3 (3) = 16+ 3+50+3=72

Voyons voyez si le résultat de sortie ressemble à ceci :

Comment calculer la position dun élément en utilisant js

Dans ce code, deux méthodes importantes sont introduites : getElementById() et getBoundingClientRect().

La méthode getElementById() peut obtenir l'objet élément en fonction de la valeur id spécifiée (cette méthode peut renvoyer une référence au premier objet avec l'ID spécifié) 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>

Copier après la connexion

分析：（前提，将body 节点的默认内外边距去掉了）

div2因为没有定位父节点，所以其偏移是相对于 body 节点的，则水平和垂直偏移位置都为div1的边框宽度（3px）等于3px。
div4最近的定位父节点为div3，水平偏移位置就是div3的left 属性值（20px），垂直偏移位置就是div3的top 属性值（10px）。

我们看看输出结果是不是这样的：

Comment calculer la position dun élément en utilisant js

通过上面示例，我们来了解两个属性：offsetLeft 和 offsetTop。

offsetLeft 和 offsetTop

Et la méthode getBoundingClientRect() de l'objet élément peut obtenir la position de l'élément par rapport à la fenêtre du navigateur. Elle renverra un objet Object, qui possède 6 propriétés : haut, gauche, droite, bas, width, height :

Element object.getBoundingClientRect().top peut renvoyer la distance entre la bordure extérieure de l'élément et la bordure supérieure de la fenêtre du navigateur 🎜🎜🎜🎜 ; Element object.getBoundingClientRect().left peut renvoyer la distance entre la bordure extérieure gauche de l'élément et la bordure gauche de la fenêtre du navigateur 🎜🎜🎜🎜

Element object.getBoundingClientRect().right  ; code> peut renvoyer la distance entre la bordure extérieure droite de l'élément et la bordure gauche de la fenêtre du navigateur ; 🎜🎜🎜🎜<code>element object.getBoundingClientRect().bottom

peut renvoyer la distance depuis la partie inférieure ; bordure extérieure de l'élément jusqu'à la bordure supérieure de la fenêtre du navigateur ; 🎜🎜🎜🎜element object.getBoundingClientRect() .width peut renvoyer la largeur de l'élément, y compris la largeur des bordures gauche et droite. ; 🎜🎜🎜🎜Element object.getBoundingClientRect().height peut renvoyer la hauteur de l'élément, y compris la largeur des bordures supérieure et inférieure. 🎜🎜🎜🎜🎜2. Calculez la position de décalage par rapport au nœud parent ou à l'élément de corps🎜🎜rrreee🎜Analyse : (Prérequis, les marges intérieures et extérieures par défaut du nœud de corps sont supprimées)🎜🎜🎜🎜div2 car le nœud parent n'est pas positionné. Par conséquent, son décalage est relatif au nœud du corps, et les positions de décalage horizontal et vertical correspondent toutes deux à la largeur de la bordure de div1 (3px), qui est égale à 3px. 🎜🎜🎜🎜Le nœud parent positionné le plus proche de div4 est div3, la position de décalage horizontal est la valeur d'attribut gauche de div3 (20px) et la position de décalage vertical est la valeur d'attribut supérieure de div3 (10px). 🎜🎜🎜🎜Voyons si le résultat ressemble à ceci : 🎜🎜 Comment calculer la position dun élément en utilisant js

Comment calculer la position dun élément en utilisant js

🎜🎜🎜Grâce à l'exemple ci-dessus, nous découvrirons deux propriétés : offsetLeft et offsetTop. 🎜🎜Les attributs offsetLeft et offsetTop peuvent respectivement obtenir les positions de décalage horizontal et vertical de l'élément par rapport à son élément parent ou élément de corps. 🎜🎜【Apprentissage recommandé : 🎜Tutoriel avancé javascript🎜】🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!