Kutuların Yüksekliklerini Eşitleme

JQuery ile Nesnelerin Yüksekliklerini Elde Etme ve Değiştirme

JQuery'de nesnelerin yükseklikleri ile işlem yapmak için height fonksiyonu kullanılır. 

height() şeklinde kullanılarak bir nesnenin yüksekliği elde edilebilir. Fonksiyona parametre verdiğimizde ise o nesnenin yüksekliği değiştirilir.

var x = $("#div1").height();

Yukarıda div1 isimli nesnenin yüksekliği bulunarak x değişkenine aktarılmıştır.

$("#div1").height(500);

Şimdi ise div1 isimli nesnenin yüksekliği 500 px olarak değiştirilmiştir.

Bu fonksiyonu kullanarak birden fazla nesnenin, örneğin kutuların yüksekliklerini eşitlemek istersek aşağıdaki gibi yapabiliriz.

var height1=$("#card1").height();
var height2=$("#card2").height();
var height3=$("#card3").height();
var height4=$("#card4").height();

var enYuksek = Math.max(height1,height2,height3,height4);

$("#card1").height(enYuksek);
$("#card2").height(enYuksek);
$("#card3").height(enYuksek);
$("#card4").height(enYuksek);

Yukarıdaki örnekte 4 adet div elemanının önce yükseklikleri elde edilmiş ve farklı değişkenlere atanmıştır. Ardından Max fonksiyonu ile bunların en büyük olanı elde edilmiştir. Böylece kutulardan en fazla yüksekliğe sahip olanın height değeri bulunmuştur. Son olarak bu değer kutuların hepsine yeni height değeri olarak atanmıştır.

divlerin yüksekliklerini eşitleme, jquery height fonksiyonu ile nesnelerin yüksekliklerini değiştirme, jquery yükseklik elde etme, yan yana kutuların yüksekliklerini eşitleme, jquery height fonksiyonu

KONU İLE İLGİLİ ÖRNEKLER

Bu konu ile ilgili örnek bulunmamaktadır.



YORUMLAR




Online Kullanıcı Sayısı 907