Metoden width

Metoden width lar deg hente og endre bredden til et element. Det er viktig å huske at vi vil få den 'beregnede verdien' for bredden (computed width). I motsetning til metoden css('width'), returnerer den en dimensjonsløs verdi (for eksempel 400) og er praktisk for matematiske beregninger. Metoden henter bredden på elementets innhold, uavhengig av angivelse av CSS-egenskapen box-sizing. For å unngå ulemper knyttet til dette, anbefales det å bruke css('width'). Feil i beregningen kan også oppstå hvis brukeren endrer sidens størrelse, eller hvis elementet eller dets forelder er skjult. Breddeverdien tar ikke hensyn til verdier for padding og ramme.

Syntaks

Hente bredden til et element. I noen tilfeller kan de oppnådde verdiene være brøkdeler:

$(selector).width();

For å endre bredden på et element - kan du sende et tall (for eksempel 400), da vil måleenhetene være piksler, eller en streng, med angivelse av måleenheter (for eksempel '10em'):

$(selector).width(ny verdi);

Vi kan også bruke en gitt funksjon på hvert element i settet. I dette tilfellet vil funksjonen motta indeksen til elementet i settet som første parameter, og som andre parameter - den nåværende verdien for den angitte bredden for det spesifikke elementet. Verdien this inne i funksjonen vil peke på det gjeldende elementet. Breddeverdien til elementet vil endres til den som returneres av funksjonen:

$(selector).width(function(indeks i settet, nåværende breddeverdi));

Eksempel

La oss ved klikk på div endre dens bredde til verdien 40px, ved å bruke metoden width, og også ved hjelp av css endre dens bakgrunn til grønn:

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

Se også

metoden height,
som lar deg hente og endre høyden til et element
metoden innerWidth,
som lar deg hente og endre bredden til et element, med hensyn til dens indre padding
metoden outerWidth,
som lar deg hente og endre bredden til et element, med hensyn til dens padding og ramme
metoden css,
som lar deg hente og endre CSS-stiler for et element