Kaedah outerWidth

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

Sintaks

Beginilah cara kita boleh mendapatkan lebar 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 lebar elemen - anda boleh menghantar nombor (contohnya 400), maka unit pengukuran akan menjadi piksel, atau rentetan, dengan menyatakan unit pengukuran (contohnya '10em'):

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

Kita juga boleh menggunakan fungsi yang ditentukan untuk setiap elemen dalam set. Pada masa yang sama, fungsi akan menerima indeks elemen dalam set sebagai parameter pertama, dan parameter kedua - nilai semasa lebar yang ditetapkan untuk elemen tertentu. this di dalam fungsi akan menunjuk kepada elemen semasa. Nilai lebar elemen akan berubah kepada nilai yang dikembalikan oleh fungsi:

$(selector).outerWidth(function(index, currentValue));

Contoh

Mari kita bandingkan dan keluarkan maklumat tentang lebar perenggan #test, yang diperoleh oleh kaedah width, innerWidth dan outerWidth:

<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

kaedah width,
yang membolehkan anda mendapatkan dan mengubah lebar elemen
kaedah innerWidth,
yang membolehkan anda mendapatkan dan mengubah lebar elemen, dengan mengambil kira paddingnya