Метод 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,
който позволява получаването и промяната на височината на елемент, като се вземат предвид неговите вътрешни отстъпи