Metoderne outerWidth og outerHeight i jQuery

Den sidste par metoder - outerWidth og outerHeight, som gør det muligt at få bredden og højden af et element inklusive alle padding og borders, eller man kan udelade de ydre margener margin.

Lad os se på et eksempel. Antag at vi har et afsnit:

<p id="test">text</p>
<p id="out"></p>

CSS ser sådan ud:

p {
	margin: 10px;
	padding: 5px;
	border: 2px solid blue;
}

Lad os få bredde- og højdeværdierne for afsnittet #test, inklusive indre padding og borders, for at gøre dette skal man overføre false eller lade parenteserne være tomme (da det allerede er standard i metoden):

let w = $('#test').outerWidth(false);
let h = $('#test').outerHeight();
$('#out').text('Width: ' + w + ' Height: ' + h);

Nu vil vores værdier afvige med yderligere 4px, da tykkelsen af borders er 2px på hver side.

Og lad os nu få bredde- og højdeværdierne for afsnittet #test, inklusive alle margener og borders, for at gøre dette skal man overføre true til metoderne outerWidth og outerHeight:

let w = $('#test').outerWidth(true);
let h = $('#test').outerHeight(true);
$('#out').text('Width: ' + w + ' Height: ' + h);

Nu vil vores værdier afvige fra de foregående med yderligere 20px, da de ydre margener er 10px på hver side.

Udfyld løsningen til de foregående opgaver - udskriv i det tredje afsnit under div'en #wrapper bredde- og højdeværdierne for div'en #wrapper - inklusive indre padding og borders, men uden ydre margener. I det fjerde afsnit, udskriv bredde- og højdeværdierne for div'en #wrapper inklusive alle margener og borders.

Også med metoderne outerWidth og outerHeight kan vi ændre bredde- og højdeværdierne for elementer. For eksempel, lad os sætte bredden af div'en #test1 til 250px, og højden af #test2 - til 200px:

$('#test1').outerWidth(250, true);
$('#test2').outerHeight(200);

Alle de nævnte metoder til arbejde med størrelser af et element giver også mulighed for at anvende en funktion på hvert element i sættet.