Метад innerHeight

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

Сінтаксіс

Атрымаць вышыню элемента. У некаторых выпадках атрыманыя значэнні могуць быць дробнымі:

javascript$(селектар).innerHeight();

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

javascript$(селектар).innerHeight(новае значэнне);

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

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

Прыклад

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

html<p id="test">text</p>
<p id="out1"></p>
<p id="out2"></p>
cssp {
  margin: 10px;
  padding: 5px;
  border: 2px solid blue;
}
javascriptlet h1 = $('#test').height();
let h2 = $('#test').innerHeight();

$('#out1').text(h1);
$('#out2').text(h2);

Мы ўбачым розніцу ў 10px, што з'яўляецца сумай нашых верхняга і ніжняга ўнутраных адступаў.

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

  • метад height,
    які дазваляе атрымліваць і змяняць вышыню элемента
  • метад outerHeight,
    які дазваляе атрымліваць і змяняць вышыню элемента, улічваючы яго адступы і мяжу