Метады outerWidth і outerHeight у jQuery

Апошняя пара метадаў - outerWidth і outerHeight, з дапамогай якіх магчыма атрымаць шырыню і вышыню элемента з улікам усіх водступаў і межаў, а можна не ўлічваць знешнія водступы margin.

Разгледзім прыклад. Хай у нас ёсць абзац:

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

CSS выглядае так:

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

Давайце атрымаем значэнні шырыні і вышыні абзаца #test, улічваючы ўнутраныя водступы і межы, для гэтага ў гэтыя метады неабходна перадаць false або пакінуць дужкі пустымі (так як яно ўжо стаіць у метаде па змаўчанні):

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

Цяпер нашы значэнні будуць адрознівацца яшчэ на 4px, паколькі таўшчыня межаў па 2px з кожнага боку.

А цяпер давайце атрымаем значэнні шырыні і вышыні абзаца #test, улічваючы ўсе водступы і межы, для гэтага ў метады outerWidth і outerHeight неабходна перадаць true:

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

Цяпер нашы значэнні будуць адрознівацца ад папярэдніх яшчэ на 20px, паколькі знешнія водступы ў нас па 10px з кожнага боку.

Дапоўніце рашэнне папярэдніх задач - выведзіце ў трэці абзац пад дыве #wrapper значэнні шырыні і вышыні дыва #wrapper - з улікам унутраных водступаў і межаў, але без знешніх водступаў. У чацвёрты абзац выведзіце значэнні шырыні і вышыні дыва #wrapper з улікам усіх водступаў і межаў.

Таксама з дапамогай метадаў outerWidth і outerHeight мы можам змяніць значэнні шырыні і вышыні элементаў. Напрыклад, давайце паставім шырыню дыва #test1 роўнай 250px, а вышыню #test2 - 200px:

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

Усе ўказаныя метады работы з памерамі элемента таксама прадугледжваюць магчымасць ўжывання функцыі да кожнага элемента ў наборы.