innerHeight()

посл. ред. 12.08.2016

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

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

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

jQ_object.innerHeight() => Number: Возвращает высоту первого элемента выборки с учётом полей, но без учёта границ и отступов, независимо от того, какое значение имеет свойство box-sizing.
Метод возвращает число без px в отличие от метода css('height').
Если элемент скрыт (не отображается на странице), тогда перед вычислением высоты jQuery кратковременно отображает данный элемент и снова скрывает.
Данный метод неприменим к объектам window и document.
jQ_object.innerHeight(значение) => jQuery: У каждого элемента выборки изменяет высоту содержимого с учётом полей, но без учёта границ и отступов.
jQ_object.innerHeight(функция) => 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').innerHeight(100); showHeight(); return false;">innerHeight(100)</button>
  </form>
</body>
</html>
 
<script>
function showHeight() {
  $('textarea').text(
    'innerHeight(): ' + $('textarea').innerHeight() +
    '\ncss("height"): ' + $('textarea').css('height')
  );
}
showHeight();
</script>