Metoda width

Metoda width permite obținerea și modificarea lățimii unui element. Este important să rețineți că vom obține 'valoarea calculată' a lățimii (computed width). Spre deosebire de metoda css('width'), ea returnează o valoare fără unitate de măsură (de exemplu 400) și este utilă în calculele matematice. Metoda obține lățimea conținutului elementului, indiferent de specificarea proprietății CSS box-sizing. Pentru a evita neplăcerile legate de acest lucru, este recomandat să folosiți css('width'). Erori de calcul pot apărea, de asemenea, dacă utilizatorul modifică dimensiunile paginii, sau dacă elementul sau părintele său sunt ascunse. Valoarea lățimii nu ia în considerare valorile padding-ului și bordurii.

Sintaxă

Obținerea lățimii elementului. În unele cazuri valorile obținute pot fi fracționale:

$(selector).width();

Pentru a modifica lățimea elementului - puteți transmite un simplu număr (de exemplu 400), caz în care unitatea de măsură va fi pixeli, sau un șir de caractere, cu specificarea unității de măsură (de exemplu '10em'):

$(selector).width(valoare nouă);

De asemenea, putem aplica o funcție dată fiecărui element din set. În acest caz, primul parametru al funcției va primi indexul elementului din set, iar al doilea parametru - valoarea curentă a lățimii setate pentru elementul specific. Valoarea this în interiorul funcției va indica elementul curent. Valoarea lățimii elementului se va schimba în cea returnată de funcție:

$(selector).width(function(index, valoare curentă a lățimii));

Exemplu

Să modificăm la click pe un div lățimea acestuia la valoarea de 40px, folosind metoda width, și de asemenea cu css să îi schimbăm fundalul în verde:

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

Vedeți și

metoda height,
care permite obținerea și modificarea înălțimii unui element
metoda innerWidth,
care permite obținerea și modificarea lățimii unui element, luând în considerare padding-ul intern
metoda outerWidth,
care permite obținerea și modificarea lățimii unui element, luând în considerare padding-ul și bordura
metoda css,
care permite obținerea și modificarea stilurilor CSS ale unui element