web-dev-qa-db-fra.com

Comment obtenir le bon décalage d'un élément? - jQuery

C'est probablement une question très simple, mais comment puis-je obtenir le décalage droite d'un élément dans jQuery?

Je peux faire:

$("#whatever").offset().left;

et c'est valide.

Mais il semble que:

$("#whatever").offset().right

est indéfini.

Alors, comment peut-on accomplir cela dans jQuery?

Merci!!

jqueryoffset
77
Alex

Alex, Gary:

Comme demandé, voici mon commentaire posté comme réponse:

var rt = ($(window).width() - ($whatever.offset().left + $whatever.outerWidth()));

Merci de me le faire savoir.

En pseudo-code, exprimable sous la forme:

Le bon décalage est:

La fenêtre largeur MOINS
(L'élément décalage gauche PLUS l'élément largeur extérieure )

152
Brendon Crawford
var $whatever        = $('#whatever');
var ending_right     = ($(window).width() - ($whatever.offset().left + $whatever.outerWidth()));

Référence: . OuterWidth ()

28
jAndy

Je comprends peut-être mal votre question, mais le décalage est censé vous donner deux variables: une horizontale et une verticale. Ceci définit la position de l'élément. Donc, ce que vous recherchez, c'est:

$("#whatever").offset().left

et

$("#whatever").offset().top

Si vous avez besoin de savoir où se situe la bonne frontière de votre élément, vous devez utiliser:

$("#whatever").offset().left + $("#whatever").outerWidth()
14
Greg

Juste un ajout à ce que Greg a dit:

$ ("# n'importe quoi"). offset (). left + $ ("# n'importe quoi"). outerWidth ()

Ce code aura la bonne position par rapport au côté gauche. Si l'intention était d'obtenir la position du côté droit par rapport au droit (comme lors de l'utilisation de la propriété CSS right, alors un ajout au code est nécessaire comme suit:

$ ("# parent_container"). innerWidth () - ($ ("# n'importe quoi"). offset (). left + $ ("# n'importe quoi"). outerWidth ())

Ce code est utile dans les animations où vous devez définir le côté droit comme une ancre fixe lorsque vous ne pouvez pas définir initialement la propriété right en CSS.

8
cdZ

Il existe une API DOM native qui permet d’atteindre cet objectif immédiatement - getBoundingClientRect :

document.querySelector("#whatever").getBoundingClientRect().right
4
Barney

Brendon Crawford avait la meilleure réponse ici (en commentaire), alors je vais le déplacer vers une réponse jusqu'à ce qu'il le fasse (et peut-être développer un peu).

var offset = $('#whatever').offset();

offset.right = $(window).width() - (offset.left + $('#whatever').outerWidth(true));
offset.bottom = $(window).height() - (offset.top + $('#whatever').outerHeight(true));
4
Gary

En réalité, ceux-ci ne fonctionnent que lorsque la fenêtre ne fait pas défiler du tout en haut à gauche.
Vous devez soustraire les valeurs de défilement de la fenêtre pour obtenir un décalage utile pour repositionner les éléments afin qu'ils restent sur la page:

var offset = $('#whatever').offset();

offset.right = ($(window).width() + $(window).scrollLeft()) - (offset.left + $('#whatever').outerWidth(true));
offset.bottom = ($(window).height() + $(window).scrollTop()) - (offset.top + $('#whatever').outerHeight(true));
4
jrosen

Obtenir le point d'ancrage d'une div/table (left) = $("#whatever").offset().left; - ok!

Obtenir le point d'ancrage d'une div/table (right), vous pouvez utiliser le code ci-dessous.

 $("#whatever").width();
2
hyp3r byt3