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

Смотрите также