Méthode offset

La méthode offset permet d'obtenir la position d'un élément par rapport au document, contrairement à la méthode position, qui obtient les coordonnées par rapport aux marges du parent. La méthode offset est plus utile pour positionner un nouvel élément au-dessus d'un élément existant pour des manipulations globales, par exemple, pour mettre en œuvre le glisser-déposer (drag-and-drop). En résultat, la méthode retourne un objet, contenant les propriétés top et left. Des erreurs dans les calculs peuvent survenir si l'utilisateur modifie les dimensions de la page. De plus, la méthode n'obtient pas les coordonnées des éléments cachés.

Syntaxe

Obtenir les coordonnées actuelles. Dans certains cas, les valeurs obtenues peuvent être fractionnaires :

$(sélecteur).offset();

Pour modifier les coordonnées d'un élément, il faut transmettre un objet, contenant les propriétés top et left :

$(sélecteur).offset({top: 40, left: 40});

Nous pouvons également appliquer une fonction donnée à chaque élément dans l'ensemble. Dans ce cas, le premier paramètre de la fonction recevra le numéro de l'élément dans l'ensemble, et le deuxième paramètre - l'objet avec les coordonnées top et left. this à l'intérieur de la fonction pointera vers l'élément courant. Les valeurs des coordonnées de l'élément changeront pour celles renvoyées par la fonction :

$(sélecteur).width(function(numéro dans l'ensemble, {coordonnées actuelles}));

Exemple

Obtenons la position du div (carré vert), à l'aide de la méthode offset, puis, en accédant aux clés de l'objet obtenu, affichons cette information :

<div id="result">click a square ...</div>
<div id="test"></div>

#test {
	position: absolute;
	top: 40px;
	left: 40px;
	width: 100px;
	height: 100px;
	background: green;
	color: white;
	margin-top: 10px;
	cursor: pointer;
}

$('*', document.body).click(function(event) {
	let offset = $(this).offset();
	
	event.stopPropagation();
	$('#result').text('Left: ' + offset.left + ', Top: ' + offset.top);
});

Exemple

Modifions les coordonnées du deuxième paragraphe :

<p style="margin-left: 10px;">text1</p>
<p style="margin-left: 10px;">text2</p>

$('p').last().offset({top: 40, left: 60});

Voir aussi

méthode position,
qui permet d'obtenir les coordonnées actuelles d'un élément
méthode offsetParent,
qui permet d'obtenir l'ancêtre positionné le plus proche de l'élément
méthode css,
qui permet d'obtenir et de modifier les styles CSS d'un élément