Kaedah innerWidth

Kaedah innerWidth membolehkan anda mendapatkan dan mengubah lebar elemen dengan mengambil kira padding dalamannya. 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. Nilai lebar tidak mengambil kira ketebalan sempadan elemen.

Sintaks

Dapatkan lebar elemen. Dalam beberapa kes nilai yang diperoleh mungkin pecahan:

$(pemilih).innerWidth();

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

$(pemilih).innerWidth(nilai baru);

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

$(pemilih).innerWidth(function(indeks dalam set, nilai lebar semasa));

Contoh

Mari kita tampilkan maklumat tentang lebar perenggan #test, yang diperoleh oleh kaedah width dan innerWidth untuk perbandingan:

<p id="test">teks</p>
<p id="out1"></p>
<p id="out2"></p>

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

let w1 = $('#test').width();
let w2 = $('#test').innerWidth();

$('#out1').text(w1);
$('#out2').text(w2);

Kita akan melihat perbezaan sebanyak 10px, iaitu jumlah padding kiri dan kanan kita.

Lihat juga

kaedah width,
yang membolehkan anda mendapatkan dan mengubah lebar elemen
kaedah outerWidth,
yang membolehkan anda mendapatkan dan mengubah lebar elemen, dengan mengambil kira padding dan sempadannya