Obtenha e defina a posição com jQuery .offset ()

106

Como obter e definir a posição de um elemento com o .offsetmétodo jQuery ?

Digamos que eu tenha um div layer1e outro layer2. Como posso obter a posição layer1e definir a mesma posição para layer2?

jquery

— Denise
fonte

6

Denise, você ao menos verificou o método .offset () no site da jQuery? Além disso, por que você não aceita a resposta de Steve abaixo ?!

— Rafid

1

@Rafid ela basicamente nunca mais voltou

— jcollum

6

Posso ter seus pontos?

— ganders

191

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

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

— Steve
fonte

7

Você pode simplesmente passar o offsetobjeto inteiro , então //setele se tornaria: $("#secondElementId").offset(offset)

— mecampbellsoup

Ei! como posso definir a parte inferior e direita de div? não há propriedade inferior correta no deslocamento

— JerryGoyal

34

Eu recomendo outra opção. O jQuery UI possui um novo recurso de posição que permite posicionar elementos em relação uns aos outros. Para documentação completa e demonstração, veja: http://jqueryui.com/demos/position/#option-offset .

Esta é uma maneira de posicionar seus elementos usando o recurso de posição:

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

— KSev
fonte

13

Esta resposta foi rejeitada duas vezes, sem explicação. Por favor, diga por que, se você votar contra minha resposta. Obrigado!

— KSev

2

Talvez seja porque você usa jQuery UI enquanto o OP pede apenas jQuery.

— carrinho

7

muitas vezes as pessoas vão longe demais com a votação negativa. Não vamos supor que uma resposta mais ampla seja inútil para os outros, mesmo que seja uma expansão do OP. Não me fale sobre o 'fechado, pois esta não é uma pergunta adequada';)

— desembarcou em

@KSev - Eu sou do futuro. jQuery ainda não tem um setter ligado .position... Veja: api.jquery.com/position

— Koshinae

@Koshinae Faz parte do jQuery "UI". Veja o link acima ou experimente jqueryui.com/position . Além disso, se estiver usando jQuery, você pode querer considerar o uso do angularJS 2.0. No entanto, espero que você mantenha o código legado.

— KSev

16

É possível, mas você deve saber que o uso de offset()define a posição do elemento em relação ao documento:

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

— Amjad Masad
fonte

0

Aqui está uma opção. Isso é apenas para as coordenadas x.

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

— Hillspro
fonte

offset (). left e css.left não são a mesma coisa, eles podem ou não ter os mesmos valores dependendo da estrutura da página.

— Kalle

Eu marquei com +1. Parece funcionar muito bem para mim e é essencialmente o mesmo que a resposta não escolhida abaixo que tem mais de 85 votos.

— Paul Nelson Baker de

Funcionou para mim. Obrigado pela contribuição!

— 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
fonte