Konumu (X,Y) HTML elemanın almak

SORU

14 Ocak 2009, ÇARŞAMBA

Konumu (X,Y) HTML elemanın almak

img JavaScript div gibi HTML elemanları X ve Y pozisyon almak için nasıl bilmek istiyorum.

CEVAP

9 Temmuz 2012, PAZARTESİ

Doğru yaklaşım element.getBoundingClientRect() kullanmak için:

var rect = element.getBoundingClientRect();
console.log(rect.top, rect.right, rect.bottom, rect.left);

Internet Explorer hakkında bakım için olasıdır ve sonunda CSSOM Views standart olduğu sürece bu yana desteklemiştir. Diğer tüm tarayıcılar a long time ago kabul etti.

Bazı tarayıcılar bu standart dışı olsa da yükseklik ve genişlik özelliklerini dönün. Eğer eski bir tarayıcı uyumluluğu için endişeleniyorsan, optimize edilmiş aşağılayıcı bir uygulama için bu cevap revizyonlarını kontrol edin.

Değerleri element.getBoundingClientRect() tarafından döndürülen görüntü alanına göre. Eğer başka bir öğe göreceli istiyorsanız, basit bir dikdörtgen çıkarın:

var bodyRect = document.body.getBoundingClientRect(),
    elemRect = element.getBoundingClientRect(),
    offset   = elemRect.top - bodyRect.top;

alert('Element is '   offset   ' vertical pixels from <body>');

Bunu Paylaş: