Методи outerWidth и outerHeight в jQuery

Последната двойка методи - outerWidth и outerHeight, с които е възможно да се получи ширината и височината на елемент, като се вземат предвид всички полета и граници, или може да не се вземат предвид външните полета margin.

Нека разгледаме пример. Да предположим, че имаме параграф:

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

CSS изглежда така:

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

Нека получим стойностите на ширината и височината на параграфа #test, като вземем предвид вътрешните полета и границите, за това в тези методи трябва да подадем false или да оставим скобите празни (тъй като то вече е зададено в метода по подразбиране):

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

Сега нашите стойности ще се различават още с 4px, тъй като дебелината на границите е по 2px от всяка страна.

А сега нека получим стойностите на ширината и височината на параграфа #test, като вземем предвид всички полета и граници, за това в методите outerWidth и outerHeight трябва да подадем true:

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

Сега нашите стойности ще се различават от предишните още с 20px, тъй като външните полета са по 10px от всяка страна.

Също така, с помощта на методите outerWidth и outerHeight можем да променим стойностите на ширината и височината на елементи. Например, нека зададем ширината на дива #test1 равна на 250px, а височината на #test2 - 200px:

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

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