Метод innerHeight

Методът innerHeight позволява получаване и промяна на височината на елемент, като се вземат предвид неговите вътрешни отстъпи. Важно е да запомните, че ще получаваме 'изчислената стойност' на височината (computed height). Грешки в изчислението могат да възникнат също, ако потребителят промени размерите на страницата, както и ако елементът или неговият родител са скрити. Стойността на височината не взема предвид дебелината на границата на елемента.

Синтаксис

Получаване на височината на елемент. В някои случаи получените стойности могат да бъдат дробни:

$(селектор).innerHeight();

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

$(селектор).innerHeight(нова стойност);

Също така можем да приложим зададена функция към всеки елемент в набора. При това първият параметър функцията ще получи номера на елемента в набора, а вторият параметър - текущата стойност на зададената височина за конкретния елемент. this във функцията ще сочи към текущия елемент. Стойността на височината на елемента ще се промени на тази, която функцията върне:

$(селектор).innerHeight(function(номер в набор, текуща стойност на височината));

Пример

Нека за сравнение изведем информация за височината на абзац #test, получена чрез методите height и innerHeight:

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

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

let h1 = $('#test').height();
let h2 = $('#test').innerHeight();

$('#out1').text(h1);
$('#out2').text(h2);

Ще видим разлика от 10px, което е сумата от нашите горен и долен вътрешни отстъпи.

Вижте също

метод height,
който позволява получаване и промяна на височината на елемент
метод outerHeight,
който позволява получаване и промяна на височината на елемент, като се вземат предвид неговите отстъпи и граница