Meetod outerHeight

Meetod outerHeight võimaldab hankida ja muuta elemendi kõrgust, võttes arvesse sisemisi paddingut, piiri ja valikuliselt - välimisi margineid. Tähtis on meeles pidada, et me saame 'arvutusliku väärtuse' kõrgusest (computed height). Arvutusvead võivad tekkida ka siis, kui kasutaja muudab lehe suurust, samuti kui element või selle vanem on peidetud.

Süntaks

Nii saame me elemendi kõrguse. See meetod võib võtta valikulise parameetri kujul true või false (false on vaikimisi), sõltuvalt sellest - kas arvesse võetakse välised marginaalid või mitte. Mõnel juhul võivad saadud väärtused olla murdarvud:

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

Elemendi kõrguse muutmiseks - saab edastada lihtsalt numbri (näiteks 400), siis mõõtühikud on pikslid, või stringi, koos mõõtühikute märkimisega (näiteks '10em'):

$(selector).outerHeight(uus väärtus, [including_margin]);

Samuti saame me rakendada määratud funktsiooni igale elemendile komplektis. Sel juhul saab funktsioon esimese parameetrina elemendi numbri komplektis ja teise parameetrina - praeguse kõrguse väärtuse konkreetse elemendi jaoks. this funktsiooni sees viitab praegusele elemendile. Elemendi kõrguse väärtus muutub selleks, mille funktsioon tagastab:

$(selector).outerHeight(function(number in set, current height value));

Näide

Võrdluseks kuvame lõigu #test kõrguse info, mis on saadud meetoditega height, innerHeight ja 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);

Vaata ka

meetod height,
mis võimaldab hankida ja muuta elemendi kõrgust
meetod innerHeight,
mis võimaldab hankida ja muuta elemendi kõrgust, võttes arvesse selle sisemisi paddingut