Metode innerWidth

Metode innerWidth memungkinkan untuk mendapatkan dan mengubah lebar elemen dengan mempertimbangkan padding internalnya. 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. Nilai lebar tidak memperhitungkan ketebalan border elemen.

Sintaks

Mendapatkan lebar elemen. Dalam beberapa kasus nilai yang didapat mungkin berupa pecahan:

$(selektor).innerWidth();

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

$(selektor).innerWidth(nilai baru);

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

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

Contoh

Mari kita tampilkan informasi tentang lebar paragraf #test, yang didapat dengan metode 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 perbedaan sebesar 10px, yang merupakan jumlah dari padding kiri dan kanan kita.

Lihat juga

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