Metod width

Metod width elementning kengligini olish va o'zgartirish imkonini beradi. Muhimi, biz elementning 'hisoblangan kenglik' qiymatini (computed width) olamiz. Metoddan farqli o'laroq css('width'), u o'lchovsiz qiymatni qaytaradi (masalan 400) va matematik hisoblashlar uchun qulay. Metod element kontentining kengligini, CSS xususiyatiga box-sizing qanday qiymat berilganligidan qat'iy nazar, oladi. Bundan kelib chiqadigan noqulayliklarning oldini olish uchun css('width') metodidan foydalanish tavsiya etiladi. Hisoblashdagi xatolar, shuningdek, foydalanuvchi sahifa o'lchamini o'zgartirganda yoki element yoki uning ota elementi yashiringan bo'lsa, paydo bo'lishi mumkin. Kenglik qiymati chet bo'shliqlari va chegarasini hisobga olmaydi.

Sintaksis

Elementning kengligini olish. Ba'zi hollarda olingan qiymatlar kasrli son bo'lishi mumkin:

$(selektor).width();

Elementning kengligini o'zgartirish uchun - oddiy son (masalan 400) o'tkazish mumkin, bu holda o'lchov birligi piksellar bo'ladi, yoki o'lchov birligini ko'rsatgan holda satr (masalan '10em') o'tkazish mumkin:

$(selektor).width(yangi qiymat);

Shuningdek, biz belgilangan funktsiyani to'plamdagi har bir elementga qo'llashimiz mumkin. Bunda funktsiyaning birinchi parametri sifatida elementning to'plamdagi tartib raqami, ikkinchi parametri sifatida esa o'sha elementning joriy kenglik qiymati o'tkaziladi. this ning qiymati funktsiya ichida joriy elementga ishora qiladi. Elementning kenglik qiymati funktsiya qaytargan qiymatga o'zgaradi:

$(selektor).width(function(to'plamdagi tartib raqami, joriy kenglik qiymati));

Misol

Keling, div ustiga bosilganda uning kengligini 40px qiymatiga o'zgartiramiz, metodidan foydalanib width, shuningdek css yordamida uning fonini yashil rangga o'zgartiramiz:

<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'
	});
});

Shuningdek qarang

metod height,
elementning balandligini olish va o'zgartirish imkonini beradi
metod innerWidth,
elementning kengligini olish va o'zgartirish imkonini beradi, uning ichki chet bo'shliqlarini hisobga olgan holda
metod outerWidth,
elementning kengligini olish va o'zgartirish imkonini beradi, uning chet bo'shliqlari va chegarasini hisobga olgan holda
metod css,
elementning CSS uslublarini olish va o'zgartirish imkonini beradi