jQuery Dersleri
jQuery Nedir?
jQuery Nedir?
jQuery Kurulumu
jQuery Kod Yapısı
jQuery ready Fonksiyonu
jQuery Nesne Seçimi
jQuery Fonksiyonlar

jQuery Efektleri
jQuery Gizle ve Göster
jQuery Kaydırma
jQuery Animasyonlar
jQuery callback
jQuery Toplu İşlemler

jQuery HTML
jQuery Bilgi Almak
jQuery Bilgi Değiştirme
jQuery Bilgi Ekleme
jQuery Veri Silme
jQuery'de CSS İşlemleri

jQuery Nesneler
jQuery Nesne Bulma/Seçme
jQuery Nesne Boyutları

jQuery AJAX
jQuery AJAX

Bağlantılar
HTML Dersleri
JavaScript Dersleri
CSS Dersleri
ASP Dersleri
PHP Dersleri
MySQL Komutları
jQuery Dersleri
Venus Programlama

Ana Sayfa Bize Ulaşın

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.

Tüm hakları saklıdır. Lütfen kaynak belirtmeden sitenizde yayınlamayın. Web Sitesi © 2014