jQuery La méthode offset() Obtenir les coordonnées actuelles d'un élément

Définition et Usage La méthode offset()

jQuery cours tutorial

La méthode .offset() permet de récupérer la position actuelle d'un élément par rapport au document. Ce qui fait la différence avec la méthode .position(), qui récupère l'actuelle position par rapport au parent.

Lors du positionnement d'un nouvel élément dans une manipulation (en particulier pour la mise en œuvre de glisser-déplacer), la méthode .offset() est le plus utile.

La méthode .offset() retourne un objet contenant les propriétés top et left.

Syntaxe:

$(sélecteurr).offset()

Exemple : Trouver les coordonnés d'un élément

Sélectionner le code

<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>

<script language="JavaScript">
$(document).ready(function(){
  $("button").click(function(){
   var x=$("p").offset();
    alert("Left offset est: " +
x.left + " Top offset est: " + x.top);
  });
});
</script>
</head>
<body>
<p>Ceci est un paragraphe.</p>
<button>Trouver les coordonnés de
p</button>
</body>
</html>
 

Offset pour définir les coordonnées d'un élément

La méthode .offset() sert aussi pour définir les coordonnées d'un élément. Syntaxe

$(séleceuor).offset(valeur)

Paramètre

Description

valeur

Obligatoire. Un objet contenant les propriétés top et left, qui sont des entiers en pixel indiquant les nouvelles coordonnées de haut et gauche des éléments. Valeurs possibles :

  • Paire de valeur, comme {top : 100, left: 0}
  • Un objet avec les propriétés haut et gauche

Exemple : definir les coordonés d'un élément

Sélectionner le code

<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
   
$("p").offset({top:100,left:0});
  });
});
</script>
</head>
<body>
<p>Ceci est un paragraphe.</p>
<button>Définir les
coordonnés</button>
</body>
</html>

 

Offst définir la valeur des coordonnées l'aide d'une fonction

La méthode offset peut aussi définir les coordonnés d(un élément l'aide d'une fonction. Syntaxe

$(sélecteur).offset(fonction(index,oldoffset))

Paramètre

Description

fonction(index,oldoffset)

Spécifie une fonction qui retourne un objet contenant les coordonnées haut et gauche.

  • index - facultatif. Reçoit la position d'index du sélecteur
  • oldoffset - facultatif. Reçoit les coordonnées actuelles du sélecteur

Exemple :

Sélectionner le code

<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){   
$("p").offset(function(n,coord){       
newPosition=new Object();      
newPosition.left=coord.left+100;   
newPosition.top=coord.top+100;
return newPosition;
    });
  });
});
</script>
</head>
<body>
<p>Ceci est un paragraphe.</p>
<button>Définir les
coordonnés</button>
</body>
</html>

 



Par gerywa 25 juillet 2014