Kaedah outerWidth dan outerHeight dalam jQuery

Pasangan kaedah terakhir - outerWidth dan outerHeight, yang mana boleh digunakan untuk mendapatkan lebar dan tinggi elemen termasuk semua padding dan sempadan, dan boleh juga tidak mengambil kira margin luar margin.

Mari kita lihat contoh. Katakan kita ada perenggan:

<p id="test">teks</p>
<p id="out"></p>

CSS kelihatan seperti ini:

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

Mari dapatkan nilai lebar dan tinggi perenggan #test, dengan mengambil kira padding dalaman dan sempadan, untuk ini kita perlu hantar false kepada kaedah-kaedah ini atau biarkan kurungan kosong (kerana ia sudah menjadi nilai lalai dalam kaedah):

let w = $('#test').outerWidth(false);
let h = $('#test').outerHeight();
$('#out').text('Width: ' + w + ' Height: ' + h);

Sekarang nilai kita akan berbeza lagi sebanyak 4px, kerana ketebalan sempadan ialah 2px pada setiap sisi.

Sekarang mari dapatkan nilai lebar dan tinggi perenggan #test, dengan mengambil kira semua margin dan sempadan, untuk ini kita perlu hantar true kepada kaedah outerWidth dan outerHeight:

let w = $('#test').outerWidth(true);
let h = $('#test').outerHeight(true);
$('#out').text('Width: ' + w + ' Height: ' + h);

Sekarang nilai kita akan berbeza daripada yang sebelumnya lagi sebanyak 20px, kerana margin luar kita ialah 10px pada setiap sisi.

Lengkapkan penyelesaian tugas-tugas sebelumnya - paparkan dalam perenggan ketiga di bawah div #wrapper nilai lebar dan tinggi div #wrapper - dengan mengambil kira padding dalaman dan sempadan, tetapi tanpa margin luar. Dalam perenggan keempat, paparkan nilai lebar dan tinggi div #wrapper dengan mengambil kira semua margin dan sempadan.

Juga dengan menggunakan kaedah outerWidth dan outerHeight kita boleh menukar nilai lebar dan tinggi elemen. Sebagai contoh, mari tetapkan lebar div #test1 kepada 250px, dan tinggi #test2 - kepada 200px:

$('#test1').outerWidth(250, true);
$('#test2').outerHeight(200);

Semua kaedah yang dinyatakan untuk bekerja dengan saiz elemen juga menyediakan kemungkinan mengaplikasikan fungsi kepada setiap elemen dalam set.