Kaedah outerHeight

Kaedah outerHeight membolehkan anda mendapatkan dan mengubah ketinggian elemen dengan mengambil kira padding, sempadan, dan secara selektif - margin elemen. Penting untuk diingat bahawa kita akan mendapatkan 'nilai terkira' ketinggian (computed height). Ralat dalam pengiraan juga mungkin berlaku jika pengguna menukar saiz halaman, dan juga, jika elemen atau induknya disembunyikan.

Sintaks

Beginilah cara kita mendapatkan ketinggian elemen. Kaedah ini boleh menerima parameter pilihan dalam bentuk true atau false (false adalah lalai), bergantung pada sama ada margin luar akan diambil kira atau tidak. Dalam beberapa kes nilai yang diperoleh mungkin pecahan:

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

Untuk mengubah ketinggian elemen - anda boleh menghantar nombor (contohnya 400), maka unit pengukuran akan menjadi piksel, atau rentetan, dengan menyatakan unit pengukuran (contohnya '10em'):

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

Kita juga boleh menggunakan fungsi yang ditentukan untuk setiap elemen dalam set. Dalam kes ini, fungsi akan menerima indeks elemen dalam set sebagai parameter pertama, dan parameter kedua - nilai ketinggian semasa untuk elemen tersebut. this di dalam fungsi akan menunjuk kepada elemen semasa. Nilai ketinggian elemen akan berubah kepada nilai yang dikembalikan oleh fungsi:

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

Contoh

Mari kita tampilkan maklumat tentang ketinggian perenggan #test, yang diperoleh oleh kaedah 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

kaedah height,
yang membolehkan anda mendapatkan dan mengubah ketinggian elemen
kaedah innerHeight,
yang membolehkan anda mendapatkan dan mengubah ketinggian elemen, dengan mengambil kira paddingnya