Метад height

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

Сінтаксіс

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

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

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

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

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

Значэнне вышыні элемента зменіцца на тое, якое верне функцыя:

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

Прыклад

Давайце пры кліку на #test зменім яму вышыню на значэнне 30px, выкарыстоўваючы метад height, а таксама з дапамогай css зменім яго фон на зялёны:

html<div id="test"></div>

css#test {
  width: 50px; 
  height: 90px;
  background: red; 
  color: white;
  margin-top: 10px; 
  cursor: pointer;
}

javascript$('#test').one('click', function() {
  $(this).height(30).css({
    cursor: 'auto',
    backgroundColor: 'green'
  });
});

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