logo oujood
🔍

Jquery La méthode .position() pour trover la position d'un élément

OUJOOD.COM

Définition et usage: La méthode position()

jQuery cours tutorial

La méthode .position() renvoie la position du premier élément sélectionné, par rapport l'élément parent.

La méthode .position() retourne un objet avec 2 propriétés, haut et gauche, qui représentent les positions haut et gauche en pixels.

Syntaxe :

$(selector).position()

Exemple 1 : Accéder la position du deuxième paragraphe :

Exemple :    📝  Copier le code 

<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
$(document).ready(function(){
  var p = $("p:first");
var position = p.position();
$("p:last").html( "L'élément P qui
contient le texte Bonjour une position : 
<br/>left = " + position.left + ", et top = " + position.top );
});
</script>
<style>
  div { padding: 15px;}
  p { margin-left:10px; }
  </style>
</head>
<body>
  
<div>
  <p>Bonjour</p>
</div>
<p></p>
<script>
</script>
</body>
</html>

Exemple 2 : Trouver la position de l'élément p

Exemple :    📝  Copier le code 

<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
$(document).ready(function(){
  $("button").click(function(){
   var
 x=$("p").position();
    alert("La position left
est: " + x.left + " La position top est: " + x.top);
  });
});
</script>
</head>
<body>
<p>Ceci est un paragraphe.</p>
<button>Trouver la position de l'élément p</button>
</body>
</html>


JQuery les méthodes pour manipuler HTML
Par gerywa 25 juillet 2014