KATEGORİLER

jQuery Ölçü Fonksiyonları

Evet arkadaşlar jQuery derslerimizde yarıya geldiğimizi söyleyebiliriz. Bundan sonraki dersler daha çok görsellik içerdiği için öğrenmesi daha zevkli olacaktır. Bu dersimizde jQuerydeki ölçü fonksiyonlarını göreceğiz. Bu konuların çok üstünde durmuyorum sadece açıklayıp küçük bir örnek veriyorum, böyle yapmamdaki amaç ileride yapacağımız uygulamalı örneklerde zaten bu metodları çokca kullanacağız. En iyi öğrenme yolu pratik yapma olduğu için bu Temel Derslerde metodların üzerine çok düşmüyorum şimdilik sadece mantığını anlamanız yeterlidir.

.height()
.width()
.innerHeight()
.innerWidth()
.outerHeight()
.outerWidth()

.height() -> Seçilen nesnenin yüksekliği verir ve bu yüksekliği değiştirmeye yarar.
Önemli olan nokta height() ile aldığımız yükseklik nesnenin CSS ile tanımladığımız height değeridir. Yani içerisinde border,padding yada margin değeri yoktur.

 $('button').click(function(){
  var yukseklik=$('.yazi').height();
  alert('Bu div\'in yükseklik değeri : '+yukseklik+'px dir.');
 });

1 2	`<div` `class="yazi"` `style="width:200px; height:100px; border:5px solid #000;margin:5px;padding:5px;">Deneme</div>` `<button>Değer Al</button>`

button’a tıkadığımız zaman yazi classına sahip olan nesnenin yüksekliğini aldık ve bu değeri yukseklik adında bir değişkene atadık.

Daha sonrada bu değişkeni alert ile ekrana bastık. Bu div’in yükseklik değeri : 100px’dir.

.width() -> Seçilen nesnenin genişliğini verir ve bu genişliği değiştirmeye yarar.
height() metodunda olduğu gibi width() metodunda da genişlik CSS ile tanımladığımız width değeridir. Yani border,padding yada margin dahil değildir.

 $('button').click(function(){
  var genislik=$('.yazi').width();
  alert('Bu div\'in genişlik değeri : '+genislik+'px dir.');
 });

1 2	`<div` `class="yazi"` `style="width:200px; height:100px; border:5px solid #000;margin:5px;padding:5px;">Deneme</div>` `<button>Değer Al</button>`

button’a tıkladık ve yazi classına ait div’in genişlik değerini genislik isminde bir değişkene atadık ve bunun alert ile bastırdık. Ekranda görünecek olan genişlik değeri 200px’dir.

.innerHeight() -> Seçilen nesnenin yüksekliğini verir ama bu yüksekliğe padding değeri de dahildir.
Evet arkadaşlar inneHeight’in normal height den farkı bize padding ekli yüksekliği verir. Örnekle açıklayacak olursak.

 $('button').click(function(){
  var yukseklik=$('.yazi').innerHeight();
  alert('Bu div\'in yükseklik değeri : '+yukseklik+'px dir.');
 });

1 2	`<div` `class="yazi"` `style="width:200px; height:100px; border:5px solid #000;margin:5px;padding:5px;">Deneme</div>` `<button>Değer Al</button>`

Div’in yüksekliği 100px’dir arkadaşlar ama bu 100px’e ek olarak her kenardan 5er px padding 5er px margin ve 5er px border eklenmiştir.Şimdi biz innerHeight() ile bu div’in paddingli değerini alıyoruz yani ekrana 110px yazacak. Çünkü hem üst kenardan 5px hemde alt kenardan 5px padding değerimiz var birde div’in kendi değeri olan 100px var yani toplam 110px oldu.

.innerWidth() -> Seçilen nesnenin genişliğini verir ama bu genisliğe padding değeri de dahildir.
Mantığı innerHeight() ile aynıdır. Genişlik değerini verir ama dediğim gibi padding ekli halini verir.

.outerHeight() -> Seçilen nesnenin yüksekliğini verir ama bu yüksekliğini padding ve border değeri de dahildir.
Bu metodda ise hem padding değerini dahil ediyor hemde border değerini. Yani yukarıda örneği göz önüne alırsak outerHeight() değeri toplam 120px olacaktır.
Arkadaşlar burda bir püf nokta var. outerHeight() ve outerWidth() metodları True ve False olmak üzere 2 değer alır. Varsayılan olarak False’dur. Eğer True verirsek padding ve border değerlerine ek olarak margin değerinide dahil eder. Yani toplam yüksekliğimiz normal Height değeri padding değeri margin değeri ve border değeri şeklinde olur.
Mesela yukarıdaki örneğin outerHeight(true) değeri 130px’dir.

.outerWidth() -> Seçilen nesnenin genişliğini verir ama bu genişliğe padding ve boder değeri de dahildir.
outerHeigt() için dediklerimiz bunun için de değerlidir.

Ders Sahibi;
Bilgisayar Dershanesi

Yorumlar

Yorum Yapabilmek İçin Üye Girişi Yapmanız Gerekmektedir.

ETİKETLER

jquery � lçü fonksiyonları