Metodele outerWidth și outerHeight în jQuery

Ultima pereche de metode - outerWidth și outerHeight, cu ajutorul cărora este posibil să obținem lățimea și înălțimea unui element cu toate marginile și bordurile, sau putem să nu luăm în considerare marginile exterioare margin.

Să luăm un exemplu. Să presupunem că avem un paragraf:

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

CSS arată astfel:

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

Să obținem valorile lățimii și înălțimii paragrafului #test, luând în considerare marginile interioare și bordurile, pentru aceasta în aceste metode este necesar să transmitem false sau să lăsăm parantezele goale (deoarece este deja setat implicit în metodă):

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

Acum valorile noastre vor diferi încă cu 4px, deoarece grosimea borderelor este de 2px pe fiecare parte.

Și acum să obținem valorile lățimii și înălțimii paragrafului #test, luând în considerare toate marginile și bordurile, pentru aceasta în metodele outerWidth și outerHeight este necesar să transmitem true:

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

Acum valorile noastre vor diferi de cele anterioare încă cu 20px, deoarece marginile exterioare sunt de 10px pe fiecare parte.

Completați soluția sarcinilor anterioare - afișați în al treilea paragraf sub div-ul #wrapper valorile lățimii și înălțimii div-ului #wrapper - cu marginile interioare și bordurile, dar fără marginile exterioare. În al patrulea paragraf afișați valorile lățimii și înălțimii div-ului #wrapper cu toate marginile și bordurile.

De asemenea, cu ajutorul metodelor outerWidth și outerHeight putem modifica valorile lățimii și înălțimii elementelor. De exemplu, să setăm lățimea div-ului #test1 egală cu 250px, iar înălțimea #test2 - 200px:

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

Toate metodele indicate de lucru cu dimensiunile elementului prevăd, de asemenea, posibilitatea aplicării unei funcții pentru fiecare element din set.