Metode outerWidth

Metode outerWidth memungkinkan untuk mendapatkan dan mengubah lebar elemen dengan mempertimbangkan padding, border, dan secara opsional - margin elemen. Penting untuk diingat bahwa kita akan mendapatkan 'nilai yang dihitung' dari lebar (computed width). Kesalahan dalam perhitungan juga dapat terjadi jika pengguna mengubah ukuran halaman, atau jika elemen atau induknya disembunyikan.

Sintaks

Ini adalah cara kita mendapatkan lebar 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:

$(selektor).outerWidth([termasuk_margin]);

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

$(selektor).outerWidth(nilai baru, [termasuk_margin]);

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

$(selektor).outerWidth(function(indeks dalam kumpulan, nilai lebar saat ini));

Contoh

Mari kita tampilkan informasi tentang lebar paragraf #test, yang diperoleh dengan metode width, innerWidth dan outerWidth 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 w1 = $('#test').width();
let w2 = $('#test').innerWidth();
let w3 = $('#test').outerWidth(false);
let w4 = $('#test').outerWidth(true);

$('#out1').text(w1);
$('#out2').text(w2);
$('#out3').text(w3);
$('#out4').text(w4);

Lihat juga

metode width,
yang memungkinkan untuk mendapatkan dan mengubah lebar elemen
metode innerWidth,
yang memungkinkan untuk mendapatkan dan mengubah lebar elemen, dengan mempertimbangkan padding-nya