oujood.com

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

La méthode .offset() permet de récupérer la position actuelle d'un élément par rapport au document

chercher |

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 src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
$(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 src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<scriptgt;
$(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 src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<scriptgt;
$(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

MARKETPOWER-IA
Logiciel d'I.A.
Logiciel d'I.A. 100% Français pour lancer son business en ligne

La méthode secrète likes sans fin sur Facebook

Livre numérique court pour comprendre la méthode secrète permettant d'obtenir des likes sans fin sur Facebook.

GAGNER DE L'ARGENT
GRÂCE À FACEBOOK 
N'A JAMAIS ÉTÉ SI FACILE


Consulter


1tpe