outerWidth en outerHeight methoden in jQuery
Het laatste paar methoden - outerWidth en
outerHeight, waarmee het mogelijk is om de
breedte en hoogte van een element te verkrijgen
met inbegrip van alle marges en randen,
of je kunt de buitenste marges margin negeren.
Laten we een voorbeeld bekijken. Stel we hebben een alinea:
<p id="test">tekst</p>
<p id="out"></p>
De CSS ziet er als volgt uit:
p {
margin: 10px;
padding: 5px;
border: 2px solid blue;
}
Laten we de breedte- en hoogtewaarden van de alinea
#test verkrijgen,
rekening houdend met de binnenste marges en randen,
hiervoor moeten we
false doorgeven aan deze methoden
of de haakjes leeg laten (aangezien
het standaard in de methode staat):
let w = $('#test').outerWidth(false);
let h = $('#test').outerHeight();
$('#out').text('Breedte: ' + w + ' Hoogte: ' + h);
Nu zullen onze waarden nog eens met 4px verschillen,
omdat de randdikte 2px aan elke zijde is.
En laten we nu de breedte- en hoogtewaarden van de alinea
#test verkrijgen, rekening houdend met alle marges en randen,
hiervoor moeten we true doorgeven aan de methoden
outerWidth en outerHeight:
let w = $('#test').outerWidth(true);
let h = $('#test').outerHeight(true);
$('#out').text('Breedte: ' + w + ' Hoogte: ' + h);
Nu zullen onze waarden nog eens met 20px verschillen van de vorige,
omdat onze buitenste marges
10px aan elke zijde zijn.
Vul de oplossing van de vorige taken aan - geef
in de derde alinea onder de div #wrapper
de breedte- en hoogtewaarden van de div #wrapper weer -
met inbegrip van binnenste marges en randen, maar zonder
buitenste marges. In de vierde alinea geef je
de breedte- en hoogtewaarden van de div #wrapper weer
met inbegrip van alle marges en randen.
Ook kunnen we met de methoden outerWidth en
outerHeight
de breedte- en hoogtewaarden van elementen wijzigen.
Laten we bijvoorbeeld de breedte van div #test1
instellen op 250px, en de hoogte van #test2 - op 200px:
$('#test1').outerWidth(250, true);
$('#test2').outerHeight(200);
Alle genoemde methoden voor het werken met afmetingen van een element bieden ook de mogelijkheid om een functie toe te passen op elk element in de set.
