height()

посл. ред. 12.08.2016

Метод height() изменяет высоту всех элементов выборки или возвращает высоту первого элемента (без учёта полей (padding), границ (border) и отступов (margin)).

Значение высоты должно указываться в виде строки или числа. Если значение передано в виде числа, тогда оно автоматически конвертируется в строку и к нему добавляется px.

Варианты использования

jQ_object.height() => Number: Возвращает высоту первого элемента выборки без учёта полей, границ и отступов, независимо от того, какое значение имеет свойство box-sizing.
Метод возвращает число без px в отличие от метода css('height').
Если элемент скрыт (не отображается на странице), тогда перед вычислением высоты jQuery кратковременно отображает данный элемент и снова скрывает.
Данный метод применим к объектам window и document.
jQ_object.height(значение) => jQuery: У каждого элемента выборки изменяет высоту содержимого, то есть без учёта полей, границ и отступов.
jQ_object.height(функция) => jQuery: У каждого элемента выборки изменяет высоту на новое значение, возвращённое указанной функцией. Данная функция выполняется для каждого элемента выборки отдельно.
При запуске функции первым аргументом передаётся индекс элемента в выборке. Вторым аргументом передаётся текущая высота данного элемента. Ссылка на сам элемент хранится в переменной this.

Примеры

<html>
<head>
  <title>Работа с элементами DOM</title>
  <script type="text/javascript" src="js/jquery.js"></script>
  <style>
    .cl {
      width: 200px;
      height: 100px;
      margin: 10px;
      padding: 10px;
      border: 2px solid red;
      box-sizing: border-box;
    }
  </style>
</head>
<body>
  <form autocomplete="off">
    <textarea class="cl"></textarea>
    <br>
    <button onclick="$('textarea').height(100); showHeight(); return false;">height(100)</button>
  </form>
</body>
</html>
 
<script>
function showHeight() {
  $('textarea').text(
    'height(): ' + $('textarea').height() +
    '\ncss("height"): ' + $('textarea').css('height')
  );
}
showHeight();
</script>