JQuery position(), offset() Kullanımı

Merhaba Arkadaşlar,
Bu makalede position() ve offset() metodlarının ne işe yaradığını ve nasıl kullanabileceğimizi öğreneceğiz.İki metod da seçmiş olduğumuz etiketin, tarayıcının sol-üst köşesine göre konumunu verir.Burda etiketin soldan ve üstten kaç px uzaklıkta olduğunu öğrenebiliriz.Kullanımları şu şekilde;

İkisinin arasındaki farklı daha iyi anlamak adına aynı örnek üzerinde uygulayalım.Bir <div> etiketi tanımlayalım ve body ile div etiketlerine şu padding, margin değerlerini verelim;

Burda offset() metodunu uyguladığımızda div etiketinin margin ve padding değerleride hesaplanır.position() metodunda ise div’in margin ve padding değerleri hesaplanmaz, sadece body’nin margin ve padding değerleri hesaplanır.Örneğin bu uygulamamızda div’in position() ve offset() değerlerine bakalım.

► $(“div”).position().top; değeri 15px (body etiketinin margin-top ve padding-top değerleri toplamı)
► $(“div”).position().left; değeri 15px (body etiketinin margin-left ve padding-left değerleri toplamı)

► $(“div”).offset().top; değeri 21px (body etiketinin margin-top ve padding-top değerleri ile div etiketinin margin-top değeri toplamı)
► $(“div”).offset().left; değeri 23px (body etiketinin margin-left ve padding-left değerleri ile div etiketinin margin-left değeri toplamı)

Uygulama üzerinde değişiklikler yaparsanız daha anlaşılır olacaktır.Kodlarımız şu şekilde;

Yeni bir makalede görüşmek üzere.

Önceki : JQuery Dersleri 36 – length Kullanımı

Sonraki : JQuery Dersleri 38 – Animasyon Özelliğini Açmak ve Kapatmak

Leave a Reply

TASARIMLARINIZDA KULLANABİLECEĞİNİZ TAM 150 FARKLI RENK PALETİRenkleri Göster
+ +