innerHeight Metodu

innerHeight metodu, bir öğenin yüksekliğini iç dolgularıyla birlikte almayı ve değiştirmeyi sağlar. 'hesaplanmış yükseklik' değerini (computed height) alacağımızı hatırlamak önemlidir. Hesaplama hataları, kullanıcı sayfa boyutlarını değiştirdiğinde veya öğe ya da ebeveyni gizlendiğinde de ortaya çıkabilir. Yükseklik değeri, öğenin kenarlık kalınlığını dikkate almaz.

Sözdizimi

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

$(selektör).innerHeight();

Öğenin yüksekliğini değiştirmek için - bir sayı (örneğin 400) iletilebilir, bu durumda ölçü birimi piksel olur, veya ölçü birimi belirtilen bir string (örneğin '10em') iletilebilir:

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

Ayrıca, belirtilen bir fonksiyonu setteki her öğeye uygulayabiliriz. Bu durumda fonksiyon ilk parametre olarak set içindeki indeksi, ikinci parametre olarak da ilgili öğenin mevcut yükseklik değerini alır. this fonksiyon içinde mevcut öğeyi işaret eder. Öğenin yüksekliği, fonksiyonun döndürdüğü değer olarak değişecektir:

$(selektör).innerHeight(function(set indeksi, mevcut yükseklik değeri));

Örnek

Karşılaştırma için #test paragrafı için height ve innerHeight metotlarıyla alınan yükseklik bilgisini çıktılayalım:

<p id="test">metin</p>
<p id="out1"></p>
<p id="out2"></p>

p {
	margin: 10px;
	padding: 5px;
	border: 2px solid blue;
}

let h1 = $('#test').height();
let h2 = $('#test').innerHeight();

$('#out1').text(h1);
$('#out2').text(h2);

10px'lik bir fark göreceğiz, bu bizim üst ve alt iç dolgularımızın toplamıdır.

Ayrıca Bakınız

metot height,
öğenin yüksekliğini almayı ve değiştirmeyi sağlar
metot outerHeight,
öğenin yüksekliğini dolgularını ve kenarlığını dikkate alarak almayı ve değiştirmeyi sağlar