Metoda width

Metoda width pozwala pobierać i zmieniać szerokość elementu. Ważne jest, aby pamiętać, że będziemy pobierać 'obliczoną wartość' szerokości (computed width). W przeciwieństwie do metody css('width'), zwraca ona wartość bez jednostki (na przykład 400) i jest wygodna w obliczeniach matematycznych. Metoda pobiera szerokość treści elementu, niezależnie od zdefiniowania właściwości CSS box-sizing. Aby uniknąć niedogodności z tym związanych, zaleca się używanie css('width'). Błędy w obliczeniach mogą również wystąpić, jeśli użytkownik zmienia rozmiary strony, a także, jeśli element lub jego rodzic są ukryte. Wartość szerokości nie uwzględnia wartości marginesów wewnętrznych i obramowania.

Składnia

Pobierz szerokość elementu. W niektórych przypadkach uzyskane wartości mogą być ułamkowe:

$(selektor).width();

Aby zmienić szerokość elementu - można przekazać po prostu liczbę (na przykład 400), wtedy jednostką mierzenia będą piksele, albo ciąg znaków, z podaniem jednostki miary (na przykład '10em'):

$(selektor).width(nowa wartość);

Możemy również zastosować daną funkcję do każdego elementu w zbiorze. Przy tym pierwszym parametrem funkcja otrzyma indeks elementu w zbiorze, a drugim parametrem - bieżącą wartość zadanej szerokości dla konkretnego elementu. Wartość this wewnątrz funkcji będzie wskazywać na bieżący element. Wartość szerokości elementu zmieni się na tę, którą zwróci funkcja:

$(selektor).width(function(indeks w zbiorze, bieżąca wartość szerokości));

Przykład

Sprawmy, aby po kliknięciu na div zmienić jego szerokość na wartość 40px, używając metody width, a także za pomocą css zmienić jego tło na zielone:

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

Zobacz też

metoda height,
która pozwala pobierać i zmieniać wysokość elementu
metoda innerWidth,
która pozwala pobierać i zmieniać szerokość elementu, uwzględniając jego wewnętrzne marginesy
metoda outerWidth,
która pozwala pobierać i zmieniać szerokość elementu, uwzględniając jego marginesy i obramowanie
metoda css,
która pozwala pobierać i zmieniać style CSS elementu