Définition et Usage La méthode offset()
jQuery cours tutorialLa 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 :
|
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.
|
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
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'ARGENTGRÂCE À FACEBOOK
N'A JAMAIS ÉTÉ SI FACILE
Consulter
