Kaedah width

Kaedah width membolehkan anda mendapatkan dan mengubah lebar elemen. Penting untuk diingat bahawa kita akan mendapatkan 'nilai terkira' lebar (computed width). Berbeza dengan kaedah css('width'), ia mengembalikan nilai tanpa unit (contohnya 400) dan mudah untuk pengiraan matematik. Kaedah ini mendapatkan lebar kandungan elemen, tanpa bergantung pada penentuan sifat CSS box-sizing. Untuk mengelakkan kesulitan yang berkaitan dengan ini, disyorkan untuk menggunakan css('width'). Ralat dalam pengiraan juga mungkin berlaku, jika pengguna menukar saiz halaman, dan juga, jika elemen atau induknya disembunyikan. Nilai lebar tidak mengambil kira nilai padding dan border.

Sintaks

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

$(selector).width();

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

$(selector).width(nilai baru);

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

$(selector).width(function(indeks dalam set, nilai lebar semasa));

Contoh

Mari apabila mengklik pada div kita tukar lebarnya kepada nilai 40px, menggunakan kaedah width, dan juga dengan css tukar latar belakangnya kepada 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

kaedah height,
yang membolehkan anda mendapatkan dan mengubah ketinggian elemen
kaedah innerWidth,
yang membolehkan anda mendapatkan dan mengubah lebar elemen, mengambil kira padding dalamannya
kaedah outerWidth,
yang membolehkan anda mendapatkan dan mengubah lebar elemen, mengambil kira padding dan bordernya
kaedah css,
yang membolehkan anda mendapatkan dan mengubah gaya CSS elemen