Methode width

De methode width maakt het mogelijk om de breedte van een element te verkrijgen en te wijzigen. Het is belangrijk te onthouden dat we de 'berekende waarde' van de breedte (computed width) zullen verkrijgen. In tegenstelling tot de methode css('width'), retourneert het een dimensieloze grootheid (bijvoorbeeld 400) en is handig voor wiskundige berekeningen. De methode verkrijgt de breedte van de inhoud van het element, onafhankelijk van de opgave van de CSS-eigenschap box-sizing. Om ongemakken hiermee te vermijden, wordt aanbevolen css('width') te gebruiken. Berekeningsfouten kunnen ook optreden als de gebruiker de afmetingen van de pagina wijzigt, of als het element of zijn ouder verborgen zijn. De breedtewaarde houdt geen rekening met de waarden van padding en rand.

Syntaxis

Breedschatting van het element verkrijgen. In sommige gevallen kunnen de verkregen waarden fractioneel zijn:

$(selector).width();

Om de breedte van het element te wijzigen - kan men eenvoudig een getal doorgeven (bijvoorbeeld 400), dan zullen de eenheden pixels zijn, of een string, met opgave van de meeteenheid (bijvoorbeeld '10em'):

$(selector).width(nieuwe waarde);

We kunnen ook een opgegeven functie toepassen op elk element in de set. Hierbij krijgt de functie als eerste parameter de index van het element in de set, en als tweede parameter de huidige waarde van de opgegeven breedte voor dat specifieke element. De waarde this binnen de functie zal wijzen naar het huidige element. De breedtewaarde van het element verandert naar de waarde die de functie retourneert:

$(selector).width(function(index in set, huidige breedtewaarde));

Voorbeeld

Laten we bij het klikken op de div de breedte ervan veranderen naar de waarde 40px, gebruikmakend van de methode width, en ook met css de achtergrond kleur veranderen naar groen:

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

Zie ook

methode height,
die het mogelijk maakt om de hoogte van een element te verkrijgen en te wijzigen
methode innerWidth,
die het mogelijk maakt om de breedte van een element te verkrijgen en te wijzigen, rekening houdend met de interne afstand
methode outerWidth,
die het mogelijk maakt om de breedte van een element te verkrijgen en te wijzigen, rekening houdend met de afstand en rand
methode css,
die het mogelijk maakt om CSS-stijlen van een element te verkrijgen en te wijzigen