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


85

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

Je peux faire:

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

et c'est valable.

Mais il semble que:

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

n'est pas défini.

Alors, comment peut-on accomplir cela dans jQuery?

Merci!!

Réponses:


160

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 qui peut être exprimé comme:

Le bon décalage est:

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


cela ne fonctionne pas avec les transformations CSS, le décalage sera affecté par la transformation, mais la largeur extérieure (et la largeur) ne le seront pas.
Jonathan.

2
Il s'agit du décalage par rapport au côté droit de la fenêtre. Pour le décalage par rapport au côté gauche de la fenêtre, voir la réponse de cdZ .
Codebling

le bord le plus à droite d'un élément peut être trouvé plus "nativement" $whatever[0].getBoundingClientRect().right. c'est par rapport au bord gauche de la fenêtre.
pstanton

Merci Brendon. Réponse utile.

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

Référence: .outerWidth ()


1
Je pense qu'il faut les ajouter, puis moins 1. si la largeur est de 2, alors la gauche est à 10 et la droite n'est pas à 12 mais à 11.
nonopolarité

31
C'est une réponse incorrecte. En CSS, "gauche" implique "le décalage du point le plus à gauche de l'élément par rapport à la gauche de la fenêtre / parent", et "droite" implique "le décalage du point le plus à droite de l'élément par rapport à la droite de la fenêtre / parent" ". Donc, la bonne réponse serait:var rt = ($(window).width() - ($whatever.offset().left + $whatever.outerWidth()));
Brendon Crawford

5
@BrendonCrawford Vous devriez déplacer ce commentaire vers une réponse.
Gary

3
Une note à toute personne qui passe - la réponse ci-dessus a été modifiée pour refléter correctement le commentaire fait par Brendon.
Chris Marasti-Georg

16

Je ne comprends peut-être pas 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 trouve la bonne limite de votre élément, vous devez utiliser:

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

9

Juste un ajout à ce que Greg a dit:

$ ("# peu importe"). offset (). left + $ ("# peu importe"). externalWidth ()

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

$ ("# parent_container"). innerWidth () - ($ ("# peu importe"). offset (). left + $ ("# peu importe"). externalWidth ())

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


6

En fait, ils ne fonctionnent que lorsque la fenêtre ne défile pas du tout à partir de la position supérieure 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));

5

Il existe une API DOM native qui permet d'atteindre cet objectif hors de la boîte - getBoundingClientRect:

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

2
Mais getBoundingClientRect retourne par rapport à la fenêtre non par rapport au document, ce que fournit offset ().
Sai Dubbaka

4

Brendon Crawford a eu la meilleure réponse ici (en commentaire), donc je vais passer à 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));

2

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

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

 $("#whatever").width();
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.