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

Всички посочени методи за работа с размери на елемент също предвиждат възможността за прилагане на функция към всеки елемент в набора.