Метод width

Методът width позволява получаване и промяна на ширината на елемент. Важно е да запомните, че ще получавате 'изчислената стойност' на ширината (computed width). За разлика от метода css('width'), той връща стойност без мерни единици (например 400) и е удобен за математически изчисления. Методът получава ширината на съдържанието на елемента, независимо от задаването на CSS свойството box-sizing. За да избегнете неудобствата, свързани с това, се препоръчва използването на css('width'). Грешки в изчислението могат да възникнат също, ако потребителят променя размерите на страницата, както и ако елементът или неговият родител са скрити. Стойността на ширината не взема предвид стойностите на отстъпите и рамката.

Синтаксис

Получаване на ширината на елемент. В някои случаи получените стойности могат да бъдат дробни:

$(селектор).width();

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

$(селектор).width(нова стойност);

Също така можем да приложим зададена функция към всеки елемент в набора. При това първият параметър на функцията ще получи номера на елемента в набора, а вторият параметър - текущата стойност на зададената ширина за конкретния елемент. Стойността this във функцията ще сочи към текущия елемент. Стойността на ширината на елемента ще се промени на тази, която функцията върне:

$(селектор).width(function(номер в набора, текуща стойност на ширината));

Пример

Нека при натискане на div да променим неговата ширина на стойност 40px, използвайки метода width, както и с помощта на css да променим фона му на зелен:

<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,
който позволява получаване и промяна на ширината на елемент, като взема предвид вътрешните му отстъпи
метод outerWidth,
който позволява получаване и промяна на ширината на елемент, като взема предвид отстъпите и границата му
метод css,
който позволява получаване и промяна на CSS стиловете на елемент