Метод width

Методот width овозможува добивање и менување на ширината на елемент. Важно е да се запамети дека ќе го добиеме 'пресметаната вредност' на ширината (computed width). За разлика од методот css('width'), тој враќа вредност без димензија (на пример 400) и е погоден за математички пресметки. Методот ја добива ширината на содржината на елементот, без разлика на назначувањето на CSS-својството box-sizing. За да се избегнат неудобностите поврзани со ова, се препорачува користење на css('width'). Грешки во пресметката може да се појават и ако корисникот ги менува димензиите на страницата, како и ако елементот или неговиот родител се скриени. Вредноста на ширината не ги зема предвид вредностите на padding и border.

Синтакса

Да се добие ширината на елемент. Во некои случаи добиените вредности може да бидат дробни:

$(selector).width();

За да се смени ширината на елемент - може да се пренесе само број (на пример 400), тогаш единиците за мерење ќе бидат пиксели, или стринг, со назначување на единици за мерење (на пример '10em'):

$(selector).width(нова вредност);

Исто така можеме да примениме зададена функција на секој елемент во сетот. При тоа првиот параметар на функцијата ќе го добие индексот на елементот во сетот, а вториот параметар - моменталната вредност на зададената ширина за конкретниот елемент. Вредноста this во функцијата ќе укажува на тековниот елемент. Вредноста на ширината на елементот ќе се смени на онаа која ќе ја врати функцијата:

$(selector).width(function(index, momentalna shirina));

Пример

Ајде при клик на div да ја смениме неговата ширина на вредност 40px, користејќи го методот width, како и со помош на css да го смениме неговиот background во зелен:

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

Погледнете ги и

методот height,
кој овозможува добивање и менување на висината на елемент
методот innerWidth,
кој овозможува добивање и менување на ширината на елемент, земајќи ги предвид неговите padding
методот outerWidth,
кој овозможува добивање и менување на ширината на елемент, земајќи ги предвид неговите padding и border
методот css,
кој овозможува добивање и менување на CSS стиловите на елемент