Metode outerHeight

Metode outerHeight memungkinkan untuk mendapatkan dan mengubah tinggi elemen dengan mempertimbangkan padding, border, dan secara opsional - margin elemen. Penting untuk diingat bahwa kita akan mendapatkan 'nilai terhitung' dari tinggi (computed height). Kesalahan dalam perhitungan juga dapat terjadi jika pengguna mengubah ukuran halaman, atau jika elemen atau induknya tersembunyi.

Sintaksis

Ini adalah cara kita bisa mendapatkan tinggi elemen. Metode ini dapat menerima parameter opsional berupa true atau false (false adalah nilai default), tergantung pada apakah margin akan diperhitungkan atau tidak. Dalam beberapa kasus, nilai yang diperoleh mungkin berupa pecahan:

$(selector).outerWidth([include_margin]);

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

$(selector).outerHeight(nilai baru, [include_margin]);

Kita juga dapat menerapkan fungsi yang ditentukan ke setiap elemen dalam kumpulan. Dalam hal ini, parameter pertama fungsi akan menerima indeks 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:

$(selector).outerHeight(function(index, currentHeight));

Contoh

Mari kita tampilkan informasi tentang tinggi paragraf #test, yang diperoleh dengan metode height, innerHeight dan outerHeight untuk perbandingan:

<p id="test">teks</p>
<p id="out1"></p>
<p id="out2"></p>
<p id="out3"></p>
<p id="out4"></p>

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

let h1 = $('#test').height();
let h2 = $('#test').innerHeight();
let h3 = $('#test').outerHeight();
let h4 = $('#test').outerHeight(true);

$('#out1').text(h1);
$('#out2').text(h2);
$('#out3').text(h3);
$('#out4').text(h4);

Lihat juga

metode height,
yang memungkinkan untuk mendapatkan dan mengubah tinggi elemen
metode innerHeight,
yang memungkinkan untuk mendapatkan dan mengubah tinggi elemen, dengan mempertimbangkan padding-nya