Metodene outerWidth og outerHeight i jQuery
Det siste paret med metoder - outerWidth og
outerHeight, med disse kan man få
bredden og høyden til et element med alle marginer og kanter,
eller man kan utelukke de ytre marginene margin.
La oss se på et eksempel. Anta at vi har et avsnitt:
<p id="test">tekst</p>
<p id="out"></p>
CSS-en ser slik ut:
p {
margin: 10px;
padding: 5px;
border: 2px solid blue;
}
La oss få bredde- og høydeverdiene til avsnittet
#test, inkludert innvendig padding og kanter.
For å gjøre dette må man sende
false til disse metodene, eller la parentesene stå tomme (siden
det er standard i metoden):
let w = $('#test').outerWidth(false);
let h = $('#test').outerHeight();
$('#out').text('Bredde: ' + w + ' Høyde: ' + h);
Nå vil verdiene våre avvike med ytterligere 4px,
siden kanttykkelsen er 2px på hver side.
Og la oss nå få bredde- og høydeverdiene til avsnittet
#test, inkludert alle marginer og kanter.
For å gjøre dette må man sende true til
metodene outerWidth og outerHeight:
let w = $('#test').outerWidth(true);
let h = $('#test').outerHeight(true);
$('#out').text('Bredde: ' + w + ' Høyde: ' + h);
Nå vil verdiene våre avvike fra de forrige
med ytterligere 20px, siden de ytre marginene våre
er 10px på hver side.
Fullfør løsningen på de forrige oppgavene - skriv ut
i det tredje avsnittet under div-en #wrapper
bredde- og høydeverdiene til div-en #wrapper -
med innvendig padding og kanter, men uten
ytre marginer. I det fjerde avsnittet, skriv ut
bredde- og høydeverdiene til div-en #wrapper
med alle marginer og kanter.
Med metodene outerWidth og
outerHeight kan vi også
endre bredden og høyden på elementer.
For eksempel, la oss sette bredden på div-en #test1
til 250px, og høyden på #test2 til 200px:
$('#test1').outerWidth(250, true);
$('#test2').outerHeight(200);
Alle de nevnte metodene for å jobbe med størrelser på elementer gir også muligheten til å anvende en funksjon på hvert element i samlingen.