jQuery width() , height() , innerWidth() ve innerHeight()

Merhaba dostlar, bu dersimizde jQuery width() , height() , innerWidth() ve innerHeight() metodlarını öğreneceğiz. Peki metodları nerede kullanırız ? ve ne işe yarar ? Bu metodlarımız bir Html elementinin genişlik ve yükseklik değerlerini elde etmeye yada seçtiğimiz bir Html elementine genişlik yada yükseklik değeri vermeye yarar. Hiç vakit kaybetmeden örneklerimiz ile ilk metodumuz olan width() metodumuz ile başlayalım.

jQuery width()

jQuery width() metodu ile seçili bir Html elementinin genişliğinin kaç px olduğunu öğrenebilir yada seçilen elemente genişlik değeri verdirebiliriz. Örneğimizi inceleyelim.

Yukarıdaki örneğimizde bir div elementi yer almakta. Bu elementimizin genişliği ise 100px dir. jQuery width() metodu ile genişliğinin ne kadar olduğunu elde ettik.

Perki var olan width değerini nasıl değiştiririz. Aşağıdaki örnek kodumuza bakalım.

$("button").click(function(){
  $('#div1').width(200);
});

Evet width() metodumuza parametre girerek butona tıklandığında seçili Html elementimizin width değeri değişitirbiliriz.

jQuery height()

jQuery height() metodu ile seçili bir Html elementinin yüksekliğinin kaç px olduğunu öğrenebilir yada seçilen elemente yükseklik değeri verdirebiliriz. Örneğimizi inceleyelim.

Yukarıdaki örneğimizde bir div elementi yer almakta. Bu elementimizin yüksekliği ise 50px dir. jQuery height() metodu ile genişliğinin ne kadar olduğunu elde ettik.

Perki var olan height değerini nasıl değiştiririz. Aşağıdaki örnek kodumuza bakalım.

$("button").click(function(){
  $('#div1').height(200);
});

Evet height() metodumuza parametre girerek butona tıklandığında seçili Html elementimizin height değeri değişitrbiliriz.

jQuery innerWidth()

Bir Html elementinin sadece genişlik değeri belirtilen özellikte değildir. Ayrıca o elementin padding çevre genişliği de vardır.

Örneğin elementimizin genişliği 300px ise 10px de padding değeri vardır. Yani toplamda 310px dir. Bu değeri jQuery ile elde etmek için innerWidth() metodunuz kullanırız. Örneğimizi inceleyelim.

Yukarıdaki örneğimizde div elementimizin width değeri 300px dir. Soldan ve sağdan olmak üzere 10px de padding değeri vardır. Bu metodumuz ile toplam px değerini öğrendik yani 320px.

jQuery innerHeight()

Bir Html elementinin sadece yükseklik değeri belirtilen özellikte değildir. Ayrıca o elementin padding çevre yüksekliği de vardır.

Örneğin elementimizin yüksekliği 50px ise 10px de padding değeri vardır. Yani toplamda 60px dir. Bu değeri jQuery ile elde etmek için innerHeight() metodunuz kullanırız. Örneğimizi inceleyelim.

Yukarıdaki örneğimizde div elementimizin height değeri 50px dir. Soldan ve sağdan olmak üzere 10px de padding değeri vardır. Bu metodumuz ile toplam px değerini öğrendik yani 70px.

Diğer bir derste görüşmek üzere.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Shares