Metode width

Metode width memungkinkan untuk mendapatkan dan mengubah lebar elemen. Penting untuk diingat bahwa kita akan mendapatkan 'nilai terhitung' lebar (computed width). Berbeda dengan metode css('width'), metode ini mengembalikan nilai tanpa satuan (contohnya 400) dan nyaman untuk perhitungan matematis. Metode ini mendapatkan lebar konten elemen, terlepas dari penentuan CSS property box-sizing. Untuk menghindari ketidaknyamanan terkait hal ini, disarankan untuk menggunakan css('width'). Kesalahan dalam perhitungan juga dapat terjadi, jika pengguna mengubah ukuran halaman, atau jika elemen atau induknya disembunyikan. Nilai lebar tidak memperhitungkan nilai padding dan border.

Sintaks

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

$(selector).width();

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

$(selector).width(nilai baru);

Kita juga dapat menerapkan fungsi yang diberikan ke setiap elemen dalam set. Parameter pertama fungsi akan menerima indeks elemen dalam set, 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:

$(selector).width(function(index, nilai lebar saat ini));

Contoh

Mari saat div diklik, kita ubah lebarnya menjadi nilai 40px, menggunakan metode width, dan juga dengan css ubah latarnya menjadi hijau:

<div id="test"></div>

#test {
	width: 90px; 
	height: 80px;
	background: red; 
	color: white;
	margin-top: 10px; 
	cursor: pointer;
}

$('#test').one('click', function() {
	$(this).width(40).css({
		cursor: 'auto',
		backgroundColor: 'green'
	});
});

Lihat juga

metode height,
yang memungkinkan untuk mendapatkan dan mengubah tinggi elemen
metode innerWidth,
yang memungkinkan untuk mendapatkan dan mengubah lebar elemen, termasuk padding-nya
metode outerWidth,
yang memungkinkan untuk mendapatkan dan mengubah lebar elemen, termasuk padding dan border-nya
metode css,
yang memungkinkan untuk mendapatkan dan mengubah gaya CSS elemen