Методе 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);

Сви наведени методи рада са димензијама елемента такође подразумевају могућност примене функције на сваки елемент у скупу.