Obtenir et définir la position avec jQuery .offset ()

106

Comment obtenir et définir la position d'un élément avec la .offsetméthode jQuery ?

Disons que j'ai un div layer1et un autre layer2. Comment puis-je obtenir la position layer1et définir la même position layer2?

jquery

— Denise
source

6

Denise, avez-vous même vérifié la méthode .offset () sur le site jQuery? Aussi, pourquoi n'acceptez-vous pas la réponse de Steve ci-dessous?!

— Rafid

1

@Rafid elle n'est pratiquement jamais revenue

— jcollum

6

Puis-je avoir ses points?

— ganders

191

//Get
var p = $("#elementId");
var offset = p.offset();

//set
$("#secondElementId").offset({ top: offset.top, left: offset.left});

— Steve
source

7

Vous pouvez simplement passer l' offsetobjet entier , ainsi le //setdeviendrait: $("#secondElementId").offset(offset)

— mecampbellsoup

Hey! comment puis-je mettre en bas et à droite de div? il n'y a pas de propriété en bas à droite dans le décalage

— JerryGoyal

34

Je recommande une autre option. jQuery UI a une nouvelle fonctionnalité de position qui vous permet de positionner les éléments les uns par rapport aux autres. Pour une documentation complète et une démonstration, voir: http://jqueryui.com/demos/position/#option-offset .

Voici une façon de positionner vos éléments à l'aide de la fonction de position:

var options = {
    "my": "top left",
    "at": "top left",
    "of": ".layer1"
};
$(".layer2").position(options);

— KSev
source

13

Cette réponse a été rejetée deux fois, sans explication. Dites pourquoi, si vous votez contre ma réponse. Merci!

— KSev

2

C'est peut-être parce que vous utilisez l'interface utilisateur jQuery alors que l'OP ne demande que jQuery.

— landau

7

souvent les gens vont trop loin avec le vote vers le bas. Ne supposons pas qu'une réponse plus large est inutile pour les autres, même si cela peut être une extension du PO. Ne me lancez pas sur le 'fermé car ce n'est pas une bonne question';)

— atterri

@KSev - Je viens du futur. jQuery n'a toujours pas de setter sur .position... Voir: api.jquery.com/position

— Koshinae

@Koshinae Cela fait partie de jQuery "UI". Voir le lien ci-dessus ou essayez jqueryui.com/position . De plus, si vous utilisez jQuery, vous pouvez envisager d'utiliser angularJS 2.0. Cependant, je suppose que vous maintenez le code hérité.

— KSev

16

C'est faisable mais il faut savoir que l'utilisation offset()définit la position de l'élément par rapport au document:

$('.layer1').offset( $('.layer2').offset() );

— Amjad Masad
source

0

Voici une option. C'est juste pour les coordonnées x.

var div1Pos = $("#div1").offset();
var div1X = div1Pos.left;
$('#div2').css({left: div1X});

— Hillspro
source

offset (). left et css.left ne sont pas la même chose, ils peuvent ou non avoir les mêmes valeurs selon la structure de la page.

— Kalle

J'ai attribué +1. Cela semble fonctionner très bien pour moi et c'est essentiellement la même chose que la réponse non choisie ci-dessous qui a plus de 85 votes.

— Paul Nelson Baker

A travaillé pour moi. Merci pour la contribution!

— Erlend KH

0

var redBox = $(".post");

var greenBox = $(".post1");

var offset = redBox.offset();

$(".post1").css({'left': +offset.left});
$(".post1").html("Left :" +offset.left);

http://jsfiddle.net/va836/159/

— Chirag Suthar
source