Метод 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'
  });
});

Вижте също