jQuery Nesne Boyutları - jQuery Dersleri

jQuery Nesne Boyutları

jQuery bize bir html elementinin boyutları hakkında bilgi verebilir.

Kullandığımız Fonksiyonlar:

- width() - bir nesnenin genişliğini bildirir, değiştirir.
- height() - bir nesnenin yüksekliğini bildirir, değiştirir.
- innerWidth() - bir nesnenin kenarlık ile nesne arası iç boşluk genişliği bildirir, değiştirir.
- innerHeight() - bir nesnenin kenarlık ile nesne arası iç boşluk yüksekliğini bildirir, değiştirir.
- outerWidth() - bir nesnenin sayfadaki dış boşluk genişliğini bildirir, değiştirir.
- outerHeight() - bir nesnenin sayfadaki dış boşluk yüksekliğini bildirir, değiştirir.

Boyutlandırma

Şimdi bir div elementi hazırlayıp bir butona tıklandığında bu bilgileri vermesini sağlayan uygulama yapalım:

JAVASCRIPT Kodu

<div id="txt" style="border: 1px #000000 solid; margin: 3px;
 padding: 5px;
 width: 320px; height: 140px;"> </div>
<button id="btn">Nesne Bilgilerini Al</button>
<script>
$("#btn").click(function(){
   var txt = "";
   txt += "Genişlik: " + $("#txt").width() + "<br/>";
   txt += "Yükseklik: " + $("#txt").height() + "<br/>";
   txt += "İç Boşluk Genişliği: " + $("#txt").innerWidth() + "<br/>";
   txt += "İç Boşluk Yüksekliği: " + $("#txt").innerHeight() + "<br/>";
   txt += "Dış Boşluk Genişliği: " + $("#txt").outerWidth() + "<br/>";
   txt += "Dış Boşluk Yüksekliği: " + $("#txt").outerHeight() + "<br/>";
   $("#txt").html(txt);
 }); 
</script><br/><br/>

 


Bu fonksiyonlar sadece bilgi vermez. Aynı zamanda bahsedilen boyutları ayarlamamızı da sağlar. Örneğin;

$("#txt").width(500);

Bu fonksiyon id="txt" olan nesnenin genişliğini 500 piksele çıkarır.