Метад outerHeight

Метад outerHeight дазваляе атрымліваць і змяняць вышыню элемента з улікам унутраных адступаў, мяжы і выбарова - вонкавых адступаў элемента. Важна памятаць, што мы будзем атрымліваць 'вылічанае значэнне' вышыні (computed height). Памылкі ў вылічэнні могуць таксама ўзнікаць, калі карыстальнік мяняе памеры старонкі, а таксама, калі элемент ці яго бацька схаваны.

Сінтаксіс

Так мы можам атрымаць вышыню элемента. Гэты метад можа прымаць неабавязковы параметр у выглядзе true ці false (false стаіць па змаўчанні), у залежнасці ад таго - будуць улічвацца вонкавыя адступы ці не. У некаторых выпадках атрыманыя значэнні могуць быць дробнымі:

javascript$(селектар).outerWidth([уключаючы_margin]);

Каб змяніць шырыню элемента - можна перадаць проста лік (напрыклад 400), тады адзінкі вымярэння будуць пікселі, альбо радок, з указаннем адзінак вымярэння (напрыклад '10em'):

javascript$(селектар).outerHeight(новае значэнне, [уключаючы_margin]);

Таксама мы можам ужыць зададзеную функцыю да кожнага элемента ў наборы. Пры гэтым першым параметрам функцыя атрымае нумар элемента ў наборы, а другім параметрам - бягучае значэнне зададзенай вышыні для канкрэтнага элемента. this унутры функцыі будзе паказваць на бягучы элемент. Значэнне шырыні элемента зменіцца на тое, якое верне функцыя:

javascript$(селектар).outerHeight(function(нумар у наборы, бягучае значэнне вышыні));

Прыклад

Давайце для параўнання выведзем інфармацыю пра вышыню абзаца #test, атрыманай метадамі height, innerHeight і outerHeight:

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

Глядзіце таксама