Methode outerWidth
De methode outerWidth maakt het mogelijk om
de breedte van een element te verkrijgen
en te wijzigen, rekening houdend met de binnenafstand,
rand en optioneel - de buitenafstand van het element. Het is belangrijk
om te onthouden dat we de 'berekende waarde' van de breedte
(computed width) zullen krijgen.
Fouten in de berekening kunnen ook optreden als
de gebruiker de afmetingen van de pagina wijzigt, of als
het element of zijn ouder verborgen is.
Syntaxis
Zo kunnen we de breedte van een element verkrijgen. Deze methode kan
een optionele parameter accepteren in de vorm van true
of false (false is standaard),
afhankelijk van of de buitenafstand
wordt meegerekend of niet. In sommige gevallen
kunnen de verkregen waarden fractioneel zijn:
$(selector).outerWidth([inclusief_margin]);
Om de breedte van een element te wijzigen - kan men simpelweg
een getal doorgeven (bijvoorbeeld 400), dan is de meeteenheid
pixels, of een string,
met vermelding van de meeteenheid (bijvoorbeeld
'10em'):
$(selector).outerWidth(nieuwe waarde, [inclusief_margin]);
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. this binnen de functie zal
wijzen naar het huidige element.
De breedtewaarde van het element verandert in de waarde
die door de functie wordt geretourneerd:
$(selector).outerWidth(function(index in set, huidige breedtewaarde));
Voorbeeld
Laten we ter vergelijking informatie uitvoeren over de
breedte van de alinea #test, verkregen met de methodes
width,
innerWidth en
outerWidth:
<p id="test">tekst</p>
<p id="out1"></p>
<p id="out2"></p>
<p id="out3"></p>
<p id="out4"></p>
p {
margin: 10px;
padding: 5px;
border: 2px solid blue;
}
let w1 = $('#test').width();
let w2 = $('#test').innerWidth();
let w3 = $('#test').outerWidth(false);
let w4 = $('#test').outerWidth(true);
$('#out1').text(w1);
$('#out2').text(w2);
$('#out3').text(w3);
$('#out4').text(w4);
Zie ook
-
methode
width,
die het mogelijk maakt om de breedte 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 zijn binnenafstand
