height metodu

height metodu, öğelerin yüksekliğini almanıza ve değiştirmenize olanak tanır. Önemli olan, 'hesaplanan değeri' (computed height) alacağımızı unutmamaktır. css('height') metodunun aksine, birimsiz bir değer döndürür (örneğin 400) ve matematiksel hesaplamalar için uygundur. Metod, CSS box-sizing özelliğinin belirtilmesinden bağımsız olarak, öğenin içerik yüksekliğini alır. Gereksiz hesaplamalardan kaçınmak için css('height') kullanılması önerilir. Hesaplama hataları, kullanıcı sayfanın boyutlarını değiştirdiğinde veya öğe veya ebeveyni gizlendiğinde de ortaya çıkabilir. Yükseklik değeri, padding ve kenarlık değerlerini dikkate almaz.

Sözdizimi

Öğenin yüksekliğini alın. Bazı durumlarda alınan değerler kesirli olabilir:

$(selektör).height();

Öğenin yüksekliğini değiştirmek için - 400 gibi bir sayı iletebilirsiniz, bu durumda ölçü birimi piksel olacaktır, veya ölçü birimini belirten bir dize (örneğin '10em') iletebilirsiniz:

$(selektör).height(yeni değer);

Ayrıca, kümedeki her öğeye belirli bir fonksiyon uygulayabiliriz. Bu durumda, fonksiyon ilk parametre olarak kümedeki indeksi, ikinci parametre olarak ise ilgili öğenin mevcut yükseklik değerini alır. Fonksiyon içindeki this mevcut öğeyi gösterecektir.

Öğenin yükseklik değeri, fonksiyonun döndürdüğü değerle değişecektir:

$(selektör).height(function(kümedeki indeks, mevcut yükseklik değeri));

Örnek

Hadi #test öğesine tıklandığında, height metodunu kullanarak yüksekliğini 30px değerine değiştirelim ve ayrıca css kullanarak arkaplan rengini yeşil yapalım:

<div id="test"></div>

#test {
	width: 50px; 
	height: 90px;
	background: red; 
	color: white;
	margin-top: 10px; 
	cursor: pointer;
}

$('#test').one('click', function() {
	$(this).height(30).css({
		cursor: 'auto',
		backgroundColor: 'green'
	});
});

Ayrıca bakınız

Öğelerin genişliğini almanıza ve değiştirmenize olanak tanıyan width metodu
Öğelerin iç padding'lerini de dikkate alarak yüksekliğini almanıza ve değiştirmenize olanak tanıyan innerHeight metodu
Öğelerin padding ve kenarlığını da dikkate alarak yüksekliğini almanıza ve değiştirmenize olanak tanıyan outerHeight metodu
Öğelerin CSS stillerini almanıza ve değiştirmenize olanak tanıyan css metodu