Метод outerHeight

Методот outerHeight овозможува добивање и менување на висината на елементот со земање предвид на внатрешните отстапувања, границата и селективно - надворешните отстапувања на елементот. Важно е да се запамети дека ќе го добиеме 'пресметанато вредност' на висината (computed height). Грешки во пресметката може да се појават исто така, доколку корисникот ги менува димензиите на страницата, како и, доколку елементот или неговиот родител се скриени.

Синтакса

Вака можеме да ја добиеме висината на елементот. Овој метод може да прифати незадолжителен параметар во вид на true или false (false е по стандард), во зависност од тоа - дали ќе се земат предвид надворешните отстапувања или не. Во некои случаи добиените вредности може да бидат дробни:

$(селектор).outerWidth([вклучувајќи_margin]);

За да ја смениме ширината на елементот - може да се пренесе едноставно број (на пример 400), тогаш единиците за мерење ќе бидат пиксели, или стринг, со ознака на единиците за мерење (на пример '10em'):

$(селектор).outerHeight(нова вредност, [вклучувајќи_margin]);

Исто така можеме да примениме зададена функција на секој елемент во множеството. При тоа, првиот параметар функцијата ќе го добие бројот на елементот во множеството, а вториот параметар - моменталната вредност на зададената висина за конкретниот елемент. this внатре во функцијата ќе укажува на моменталниот елемент. Вредноста на ширината на елементот ќе се смени на онаа, која што ја враќа функцијата:

$(селектор).outerHeight(function(број во множество, моментална вредност на висина));

Пример

Ајде за споредба да ја испечатиме информацијата за висината на параграфот #test, добиена со методите height, innerHeight и outerHeight:

<p id="test">text</p>
<p id="out1"></p>
<p id="out2"></p>
<p id="out3"></p>
<p id="out4"></p>

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

let h1 = $('#test').height();
let h2 = $('#test').innerHeight();
let h3 = $('#test').outerHeight();
let h4 = $('#test').outerHeight(true);

$('#out1').text(h1);
$('#out2').text(h2);
$('#out3').text(h3);
$('#out4').text(h4);

Погледнете ги исто така

методот height,
кој овозможува добивање и менување на висината на елементот
методот innerHeight,
кој овозможува добивање и менување на висината на елементот, земајќи ги предвид неговите внатрешни отстапувања