Metoda innerHeight

Metoda innerHeight pozwala pobierać i zmieniać wysokość elementu z uwzględnieniem jego wewnętrznych odstępów. Ważne jest, aby pamiętać, że będziemy otrzymywać 'obliczoną wartość' wysokości (computed height). Błędy w obliczeniach mogą również występować, jeśli użytkownik zmienia rozmiary strony, a także, jeśli element lub jego rodzic są ukryte. Wartość wysokości nie uwzględnia grubości granicy elementu.

Składnia

Pobierz wysokość elementu. W niektórych przypadkach uzyskane wartości mogą być ułamkowe:

$(selektor).innerHeight();

Aby zmienić wysokość elementu - można przekazać po prostu liczbę (na przykład 400), wtedy jednostki pomiaru będą piksele, albo ciąg znaków, z podaniem jednostek miary (na przykład '10em'):

$(selektor).innerHeight(nowa wartość);

Możemy również zastosować daną funkcję do każdego elementu w zestawie. Przy tym pierwszym parametrem funkcja otrzyma numer elementu w zestawie, a drugim parametrem - bieżącą wartość zadanej wysokości dla konkretnego elementu. this wewnątrz funkcji będzie wskazywać na bieżący element. Wartość wysokości elementu zmieni się na tę, którą zwróci funkcja:

$(selektor).innerHeight(function(numer w zestawie, bieżąca wartość wysokości));

Przykład

Dla porównania wypiszmy informację o wysokości akapitu #test, uzyskanej metodami height i innerHeight:

<p id="test">tekst</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);

Zobaczymy różnicę wynoszącą 10px, co jest sumą naszych górnego i dolnego wewnętrznego odstępu.

Zobacz też

metoda height,
która pozwala pobierać i zmieniać wysokość elementu
metoda outerHeight,
która pozwala pobierać i zmieniać wysokość elementu, uwzględniając jego odstępy i granicę