outerHeight metode

Metode outerHeight ļauj iegūt un mainīt elementa augstumu, ieskaitot iekšējās atkāpes, apmali un selektīvi - ārējās atkāpes. Svarīgi atcerēties, ka mēs iegūsim 'aprēķināto augstuma vērtību' (computed height). Aprēķinu kļūdas var rasties arī, ja lietotājs maina lapas izmērus, kā arī, ja elements vai tā vecāks elements ir paslēpts.

Sintakse

Tā mēs varam iegūt elementa augstumu. Šī metode var pieņemt neobligātu parametru true vai false (false ir pēc noklusējuma), atkarībā no tā - vai tiks ņemtas vērā ārējās atkāpes vai nē. Dažos gadījumos iegūtās vērtības var būt daļskaitļi:

$(selector).outerWidth([including_margin]);

Lai mainītu elementa augstumu - var padot vienkārši skaitli (piemēram 400), tad mērvienība būs pikseļi, vai virkni, ar mērvienības norādi (piemēram '10em'):

$(selector).outerHeight(new value, [including_margin]);

Mēs varam arī pielietot noteiktu funkciju katram elementam komplektā. Šajā gadījumā pirmais parametrs funkcijā sauksies pašreizējā elementa indekss komplektā, bet otrais parametrs - pašreizējā augstuma vērtība konkrētajam elementam. this funkcijas iekšienē būs pašreizējais elements. Elementa augstuma vērtība mainīsies uz to, ko atgriezīs funkcija:

$(selector).outerHeight(function(index, currentHeight));

Piemērs

Salīdzinājumam izvadīsim informāciju par rindkopas #test augstumu, kas iegūts ar metodēm height, innerHeight un outerHeight:

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

Skatiet arī

metode height,
kas ļauj iegūt un mainīt elementa augstumu
metode innerHeight,
kas ļauj iegūt un mainīt elementa augstumu, ņemot vērā tā iekšējās atkāpes