Metoden width

Metoden width gør det muligt at hente og ændre bredden af et element. Det er vigtigt at huske, at vi vil få den 'beregnede værdi' af bredden (computed width). I modsætning til metoden css('width'), returnerer den en dimensionsløs størrelse (for eksempel 400) og er praktisk til matematiske beregninger. Metoden henter bredden af elementets indhold, uafhængigt af angivelsen af CSS-egenskaben box-sizing. For at undgå ulemper forbundet med dette, anbefales det at bruge css('width'). Fejl i beregningen kan også opstå, hvis brugeren ændrer sidens størrelse, eller hvis elementet eller dets forælder er skjult. Breddeværdien tager ikke højde for værdier for polstring og ramme.

Syntaks

Hent bredden af et element. I nogle tilfælde de opnåede værdier kan være brøkdele:

$(selektor).width();

For at ændre bredden af et element - kan du sende et simpelt tal (for eksempel 400), så vil måleenheden være pixels, eller en streng, med angivelse af måleenheder (for eksempel '10em'):

$(selektor).width(ny værdi);

Vi kan også anvende en given funktion på hvert element i sættet. Her vil funktionen modtage indekset for elementet i sættet som den første parameter, og den anden parameter - den aktuelle værdi af den angivne bredde for det konkrete element. Værdien this inde i funktionen vil pege på det aktuelle element. Breddeværdien af elementet vil blive ændret til den, som funktionen returnerer:

$(selektor).width(function(indeks i sættet, aktuel breddeværdi));

Eksempel

Lad os ved klik på div ændre dens bredde til værdien 40px ved hjælp af metoden width, og også ved hjælp af css ændre dens baggrund til grøn:

<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 gør det muligt at hente og ændre højden af et element
metoden innerWidth,
som gør det muligt at hente og ændre bredden af et element, herunder dens indre polstring
metoden outerWidth,
som gør det muligt at hente og ændre bredden af et element, herunder dens polstring og ramme
metoden css,
som gør det muligt at hente og ændre CSS-stilarter for et element