Metoda outerHeight

Metoda outerHeight pozwala pobierać i zmieniać wysokość elementu z uwzględnieniem wewnętrznych odstępów, obramowania i selektywnie - zewnętrznych odstępów elementu. Ważne 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.

Składnia

W ten sposób możemy otrzymać wysokość elementu. Ta metoda może przyjmować opcjonalny parametr w postaci true lub false (false jest domyślnie), w zależności od tego - czy będą uwzględniane zewnętrzne odstępy czy nie. W niektórych przypadkach otrzymane wartości mogą być ułamkowe:

javascript$(selektor).outerWidth([włączając_margin]);

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 pomiaru (na przykład '10em'):

javascript$(selektor).outerHeight(nowa wartość, [włączając_margin]);

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

javascript$(selektor).outerHeight(function(numer w zestawie, aktualna wartość wysokości));

Przykład

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

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

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

javascriptlet 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);

Zobacz też