Metoden width

Metoden width låter dig få och ändra bredden på ett element. Det är viktigt att komma ihåg att vi kommer att få ett 'beräknat värde' för bredden (computed width). Till skillnad från metoden css('width'), returnerar den en dimensionslös storhet (till exempel 400) och är praktisk vid matematiska beräkningar. Metoden får bredden på elementets innehåll, oavsett angivandet av CSS-egenskapen box-sizing. För att undvika besvär kopplade till detta rekommenderas det att använda css('width'). Fel i beräkningen kan också uppstå om användaren ändrar sidans storlek, samt om elementet eller dess förälder är dolda. Breddvärdet tar inte hänsyn till värden för marginaler och kantlinjer.

Syntax

Få bredden på ett element. I vissa fall kan de erhållna värdena vara bråktal:

$(selector).width();

För att ändra bredden på ett element - kan du skicka ett enkelt tal (till exempel 400), då kommer måttenheten att vara pixlar, eller en sträng, med angivande av måttenheter (till exempel '10em'):

$(selector).width(nytt värde);

Vi kan också applicera en given funktion på varje element i uppsättningen. Då får funktionen det första parametern elementets nummer i uppsättningen, och den andra parametern - det nuvarande värdet för den givna bredden för det specifika elementet. Värdet this inuti funktionen kommer att peka på det aktuella elementet. Värdet på elementets bredd kommer att ändras till det som funktionen returnerar:

$(selector).width(function(nummer i uppsättningen, nuvarande breddvärde));

Exempel

Låt oss vid klick på div ändra dess bredd till värdet 40px, med hjälp av metoden width, och även med hjälp av css ändra dess bakgrund till 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 även

metoden height,
som låter dig få och ändra höjden på ett element
metoden innerWidth,
som låter dig få och ändra bredden på ett element, med hänsyn till dess inre utfyllnad
metoden outerWidth,
som låter dig få och ändra bredden på ett element, med hänsyn till dess utfyllnad och kantlinje
metoden css,
som låter dig få och ändra CSS-stilar för ett element