Методе 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);
Сви наведени методи рада са димензијама елемента такође подразумевају могућност примене функције на сваки елемент у скупу.