Metode outerWidth dan outerHeight di jQuery
Pasangan metode terakhir - outerWidth dan
outerHeight, dengan bantuan yang memungkinkan untuk mendapatkan
lebar dan tinggi elemen dengan memperhitungkan semua padding dan border,
atau bisa tanpa memperhitungkan margin luar margin.
Mari kita pertimbangkan contoh. Misalkan kita memiliki paragraf:
<p id="test">teks</p>
<p id="out"></p>
CSS terlihat seperti ini:
p {
margin: 10px;
padding: 5px;
border: 2px solid blue;
}
Mari kita dapatkan nilai lebar dan tinggi paragraf
#test, dengan memperhitungkan padding dalam dan border,
untuk ini, perlu untuk meneruskan
false atau biarkan tanda kurung kosong (karena
itu sudah diatur dalam metode secara default):
let w = $('#test').outerWidth(false);
let h = $('#test').outerHeight();
$('#out').text('Width: ' + w + ' Height: ' + h);
Sekarang nilai kita akan berbeda lagi sebesar 4px,
karena ketebalan border adalah 2px di setiap sisi.
Dan sekarang mari kita dapatkan nilai lebar dan tinggi paragraf
#test, dengan memperhitungkan semua margin dan border,
untuk ini, ke metode outerWidth dan outerHeight
perlu untuk meneruskan true:
let w = $('#test').outerWidth(true);
let h = $('#test').outerHeight(true);
$('#out').text('Width: ' + w + ' Height: ' + h);
Sekarang nilai kita akan berbeda dari yang sebelumnya
lagi sebesar 20px, karena margin luar kita adalah
10px di setiap sisi.
Lengkapi solusi dari tugas sebelumnya - tampilkan
di paragraf ketiga di bawah div #wrapper
nilai lebar dan tinggi div #wrapper -
dengan memperhitungkan padding dalam dan border, tetapi tanpa
margin luar. Di paragraf keempat, tampilkan
nilai lebar dan tinggi div #wrapper
dengan memperhitungkan semua margin dan border.
Juga dengan bantuan metode outerWidth dan
outerHeight kita dapat
mengubah nilai lebar dan tinggi elemen.
Misalnya, mari kita atur lebar div #test1
menjadi 250px, dan tinggi #test2 - 200px:
$('#test1').outerWidth(250, true);
$('#test2').outerHeight(200);
Semua metode yang disebutkan untuk bekerja dengan ukuran elemen juga menyediakan kemungkinan penerapan fungsi ke setiap elemen dalam set.