Метад outerHeight
Метад outerHeight дазваляе атрымліваць
і змяняць вышыню элемента з улікам унутраных адступаў,
мяжы і выбарова - вонкавых адступаў элемента. Важна
памятаць, што мы будзем атрымліваць 'вылічанае значэнне' вышыні
(computed height).
Памылкі ў вылічэнні могуць таксама ўзнікаць, калі
карыстальнік мяняе памеры старонкі, а таксама, калі
элемент ці яго бацька схаваны.
Сінтаксіс
Так мы можам атрымаць вышыню элемента. Гэты метад можа
прымаць неабавязковы параметр у выглядзе true
ці false (false стаіць па змаўчанні),
у залежнасці ад таго - будуць улічвацца вонкавыя
адступы ці не. У некаторых выпадках
атрыманыя значэнні могуць быць дробнымі:
$(селектар).outerWidth([уключаючы_margin]);
Каб змяніць шырыню элемента - можна перадаць проста
лік (напрыклад 400), тады адзінкі
вымярэння будуць пікселі, альбо радок,
з указаннем адзінак вымярэння (напрыклад
'10em'):
$(селектар).outerHeight(новае значэнне, [уключаючы_margin]);
Таксама мы можам ужыць зададзеную функцыю да кожнага
элемента ў наборы. Пры гэтым першым параметрам функцыя
атрымае нумар элемента ў наборы, а другім параметрам
- бягучае значэнне зададзенай вышыні для канкрэтнага
элемента. this унутры функцыі будзе
паказваць на бягучы элемент.
Значэнне шырыні элемента зменіцца на тое,
якое верне функцыя:
$(селектар).outerHeight(function(нумар у наборы, бягучае значэнне вышыні));
Прыклад
Давайце для параўнання выведзем інфармацыю пра
вышыню абзаца #test, атрыманай метадамі
height,
innerHeight і
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);
Глядзіце таксама
-
метад
height,
які дазваляе атрымліваць і змяняць вышыню элемента -
метад
innerHeight,
які дазваляе атрымліваць і змяняць вышыню элемента, улічваючы яго ўнутраныя адступы