# Метод height

Метод `height` позволяет получать и изменять высоту элемента. Важно помнить, что мы будем получать 'вычисленное значение' высоты (англ. computed height). В отличие от метода `css('height')`, он возвращает безразмерную величину (к примеру `400`) и удобен при математических вычислениях. Метод получает высоту контента элемента, независимо от указания CSS-свойства `box-sizing`. Чтобы избежать лишних вычислений, рекомендуется использовать `css('height')`. Ошибки в вычислении могут также возникать, если пользователь меняет размеры страницы, а также, если элемент или его родитель скрыты. Значение высоты не учитывает значения отступов и рамки.

## Синтаксис

Получить высоту элемента. В некоторых случаях полученные значения могут быть дробными:

`$(селектор).height();`

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

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

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

Значение высоты элемента поменяется на то, которое вернет функция:

`$(селектор).height(function(номер в наборе, текущее значение высоты));`

## Пример

Давайте при клике на `#test` поменяем ему высоту на значение `30px`, используя метод `height`, а также с помощью `css` поменяем его фон на зеленый:

`<div id="test"></div>` `#test { width: 50px; height: 90px; background: red; color: white; margin-top: 10px; cursor: pointer; }` `$('#test').one('click', function() { $(this).height(30).css({ cursor: 'auto', backgroundColor: 'green' }); });`

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

- метод `width`,
  который позволяет получать и изменять ширину элемента
- метод `innerHeight`,
  который позволяет получать и изменять высоту элемента, учитывая его внутренние отступы
- метод `outerHeight`,
  который позволяет получать и изменять высоту элемента, учитывая его отступы и границу
- метод `css`,
  который позволяет получать и изменять CSS стили элемента

← →
↑