bir elemanın doğru ofseti nasıl elde edilir?

88

Bu muhtemelen gerçekten basit bir sorudur, ancak jQuery'deki bir öğenin doğru ofsetini nasıl elde edebilirim ?

Yapabilirim:

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

ve geçerlidir.

Ama öyle görünüyor:

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

tanımsız.

Peki jQuery'de bunu nasıl başarabiliriz?

Teşekkürler!!

jquery offset

— Alex
kaynak

163

Alex, Gary:

İstenildiği gibi, yorumum cevap olarak gönderilmiştir:

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

Bana bildirdiğiniz için teşekkürler.

Sözde kodda şu şekilde ifade edilebilir:

Doğru ofset:

Pencerenin genişliği EKSİ
(Öğenin sol ofseti ARTI öğenin dış genişliği )

— Brendon Crawford
kaynak

bu, CSS dönüştürmeleriyle çalışmaz, ofset dönüşümden etkilenir, ancak OuterWidth (ve genişlik) etkilenmez.

— Jonathan.

2

Bu, pencerenin sağ tarafından ofsettir. Pencerenin sol tarafından ofset için cdZ'nin cevabına bakın .

— Codebling

bir elemanın en sağ kenarı daha "yerel" olarak bulunabilir $whatever[0].getBoundingClientRect().right. bu, pencerenin sol kenarına göredir.

— pstanton

Teşekkürler brendon. Faydalı cevap.

29

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

Referans: .outerWidth ()

— jAndy
kaynak

1

bence onları eklemem gerekiyor ve sonra eksi 1. eğer genişlik 2 ise, sol 10'da ve sağ 12'de değil 11'de.

— nonopolarite

31

Bu yanlış bir cevaptır. CSS'de "sol", "öğenin en sol noktasının pencerenin / üst öğenin solundan uzaklığını", "sağ" ise öğenin en sağdaki noktasının pencerenin / üst öğenin sağından uzaklığını "belirtir. ". Yani, doğru cevap:var rt = ($(window).width() - ($whatever.offset().left + $whatever.outerWidth()));

— Brendon Crawford

5

@BrendonCrawford Bu yorumu bir cevaba taşımalısınız.

— Gary

3

Gelen herkese bir not - yukarıdaki cevap, Brendon tarafından yapılan yorumu doğru şekilde yansıtacak şekilde düzenlendi.

— Chris Marasti-Georg

16

Belki sorunuzu yanlış anlıyorum, ancak ofsetin size iki değişken vermesi gerekiyor: yatay ve dikey. Bu, elemanın konumunu tanımlar. Yani aradığınız şey:

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

ve

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

Öğenizin doğru sınırının nerede olduğunu bilmeniz gerekiyorsa, şunu kullanmalısınız:

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

— Greg
kaynak

9

Greg'in söylediklerine sadece bir ek:

$ ("# her neyse"). offset (). sol + $ ("# her neyse"). externalWidth ()

Bu kod, sol tarafa göre doğru konumu alacaktır. Sağ tarafa göre sağ taraf konumu elde etmek niyetindeyse (CSS rightözelliğini kullanırken olduğu gibi ), koda aşağıdaki gibi bir ekleme yapılması gerekir:

$ ("# parent_container"). innerWidth () - ($ ("# her neyse"). offset (). sol + $ ("# her neyse"). OuterWidth ())

Bu kod, rightözelliği başlangıçta CSS'de ayarlayamadığınızda sağ tarafı sabit bir bağlantı olarak ayarlamanız gereken animasyonlarda kullanışlıdır .

— cdZ
kaynak

6

Aslında bunlar yalnızca pencere sol üst konumdan hiç kaydırılmadığında çalışır.
Öğelerin sayfada kalması için yeniden konumlandırmada yararlı olan bir ofset elde etmek için pencere kaydırma değerlerini çıkarmanız gerekir:

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));

— jrosen
kaynak

5

Brendon Crawford burada (yorumda) en iyi cevaba sahipti, bu yüzden cevabı o cevaplayana kadar (ve belki biraz genişleterek) bir cevaba taşıyacağım.

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

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

— Gary
kaynak

5

Bunu kutudan çıkaran yerel bir DOM API vardır - getBoundingClientRect:

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

— Barney
kaynak

2

Ancak getBoundingClientRect, belgeye göre değil, görüntü alanına göre döndürür, bu da offset () işlevinin sağladığı şeydir.

— Sai Dubbaka

2

Bir bağlantı noktasını elde etmek div/table (left) = $("#whatever").offset().left;- tamam!

Bir bağlantı noktasını almak için div/table (right)aşağıdaki kodu kullanabilirsiniz.

 $("#whatever").width();

— hyp3r byt3
kaynak

bir elemanın doğru ofseti nasıl elde edilir? - jQuery