Metod width

Metod width omogućava dobijanje i promenu širine elementa. Važno je zapamtiti da ćemo dobiti 'izračunatu vrednost' širine (computed width). Za razliku od metoda css('width'), on vraća bezdimenzionu veličinu (na primer 400) i pogodan je za matematička izračunavanja. Metod dobija širinu sadržaja elementa, nezavisno od navedenog CSS svojstva box-sizing. Da bismo izbegli neudobnosti povezane sa ovim, preporučuje se korišćenje css('width'). Greške u izračunavanju mogu se takođe pojaviti, ako korisnik menja veličine stranice, kao i, ako je element ili njegov roditelj skriven. Vrednost širine ne uzima u obzir vrednosti paddinga i okvira (border-a).

Sintaksa

Dobijanje širine elementa. U nekim slučajevima dobijene vrednosti mogu biti razlomljene:

$(selektor).width();

Da bismo promenili širinu elementa - možemo proslediti jednostavno broj (na primer 400), tada će jedinica merenja biti pikseli, ili string, sa naznakom jedinica merenja (na primer '10em'):

$(selektor).width(nova vrednost);

Takođe možemo primeniti zadanu funkciju na svaki element u skupu. Pri tome će funkcija kao prvi parametar dobiti redni broj elementa u skupu, a kao drugi parametar - trenutnu vrednost zadate širine za konkretni element. Vrednost this unutar funkcije će ukazivati na trenutni element. Vrednost širine elementa će se promeniti na onu, koju funkcija vrati:

$(selektor).width(function(redni broj u skupu, trenutna vrednost širine));

Primer

Hajde da pri kliku na div promenimo mu širinu na vrednost 40px, koristeći metod width, a takođe pomoću css promenimo mu pozadinu u zelenu:

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

Pogledajte takođe

metod height,
koji omogućava dobijanje i promenu visine elementa
metod innerWidth,
koji omogućava dobijanje i promenu širine elementa, uzimajući u obzir njegov unutrašnji padding
metod outerWidth,
koji omogućava dobijanje i promenu širine elementa, uzimajući u obzir njegov padding i okvir (border)
metod css,
koji omogućava dobijanje i promenu CSS stilova elementa