Bu yazımızda Jquery de 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.
Burada etiketin soldan ve üstten kaç px uzaklıkta olduğunu öğrenebiliriz.
Kullanımları şu şekilde
|
1 2 3 4 5 6 7 8 9 10 11 12 |
//position() kullanımı $(seçici).position().top; $(seçici).position().left; //offset() kullanımı $(seçici).offset().top; $(seçici).offset().left; |
İ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.
|
1 2 3 4 5 6 7 8 9 10 11 |
body{ margin:10px; padding:5px; } div { margin-top:6px; margin-left:8px; } |
Burada 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 etiketinin 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
Umarım sizin için faydalı bir yazı olmuştur.
Yeni bir yazımda görüşmek üzere.
, offset() Kullanımı){kind=link}