Методи 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 од секоја страна.

Задание 1

Дополнете го решението на претходните задачи - испишете во третиот параграф под div-от #wrapper вредностите за ширина и висина на div-от #wrapper - со внатрешните маргини и граници, но без надворешните маргини. Во четвртиот параграф испишете вредностите за ширина и висина на div-от #wrapper со сите маргини и граници.

Исто така, со методите outerWidth и outerHeight можеме да ги промениме вредностите за ширина и висина на елементите. На пример, ајде да ја поставиме ширината на div-от #test1 на 250px, а висината на #test2 - на 200px:

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

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