Metode innerHeight

Metode innerHeight memungkinkan untuk mendapatkan dan mengubah tinggi elemen termasuk padding internalnya. Penting untuk diingat bahwa kita akan mendapatkan 'nilai yang dihitung' dari tinggi (computed height). Kesalahan dalam perhitungan juga dapat terjadi jika pengguna mengubah ukuran halaman, dan juga jika elemen atau induknya disembunyikan. Nilai tinggi tidak memperhitungkan ketebalan border elemen.

Sintaks

Mendapatkan tinggi elemen. Dalam beberapa kasus nilai yang didapat mungkin berupa pecahan:

$(selektor).innerHeight();

Untuk mengubah tinggi elemen - kita dapat memberikan angka (misalnya 400), maka satuan pengukurannya adalah piksel, atau string, dengan menentukan satuan pengukuran (misalnya '10em'):

$(selektor).innerHeight(nilai baru);

Kita juga dapat menerapkan fungsi yang diberikan ke setiap elemen dalam kumpulan. Dalam hal ini, parameter pertama fungsi akan menerima nomor elemen dalam kumpulan, dan parameter kedua - nilai tinggi saat ini untuk elemen tertentu. this di dalam fungsi akan menunjuk ke elemen saat ini. Nilai tinggi elemen akan berubah menjadi nilai yang dikembalikan oleh fungsi:

$(selektor).innerHeight(function(nomor dalam kumpulan, nilai tinggi saat ini));

Contoh

Mari kita bandingkan informasi tentang tinggi paragraf #test, yang didapat dengan metode height dan innerHeight:

<p id="test">teks</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);

Kita akan melihat perbedaan sebesar 10px, yang merupakan jumlah dari padding atas dan bawah kita.

Lihat juga

metode height,
yang memungkinkan untuk mendapatkan dan mengubah tinggi elemen
metode outerHeight,
yang memungkinkan untuk mendapatkan dan mengubah tinggi elemen, termasuk padding dan border-nya