Metoderna outerWidth och outerHeight i jQuery

Det sista paret metoder - outerWidth och outerHeight, med vilka det är möjligt att få bredd och höjd på ett element med hänsyn till alla marginaler och kanter, eller så kan man exkludera de yttre marginalerna margin.

Låt oss titta på ett exempel. Antag att vi har ett stycke:

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

CSS ser ut så här:

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

Låt oss få bredd- och höjdvärdena för stycket #test, inklusive inre marginaler och kanter. För att göra detta måste vi skicka false till dessa metoder eller lämna parenteserna tomma (eftersom det är standardvärdet i metoden):

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

Nu kommer våra värden att skilja sig med ytterligare 4px, eftersom kantens tjocklek är 2px på varje sida.

Och låt oss nu få bredd- och höjdvärdena för stycket #test, inklusive alla marginaler och kanter. För att göra detta måste vi skicka true till metoderna outerWidth och outerHeight:

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

Nu kommer våra värden att skilja sig från de föregående med ytterligare 20px, eftersom de yttre marginalerna är 10px på varje sida.

Komplettera lösningen från de föregående uppgifterna - skriv ut i det tredje stycket under div #wrapper bredd- och höjdvärdena för div #wrapper - med hänsyn till inre marginaler och kanter, men utan yttre marginaler. I det fjärde stycket, skriv ut bredd- och höjdvärdena för div #wrapper med hänsyn till alla marginaler och kanter.

Med hjälp av metoderna outerWidth och outerHeight kan vi också ändra bredd- och höjdvärdena för element. Till exempel, låt oss sätta bredden på div #test1 till 250px, och höjden på #test2 till 200px:

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

Alla nämnda metoder för att arbeta med storlekar på element tillhandahåller också möjligheten att applicera en funktion på varje element i uppsättningen.