outerHeight()

посл. ред. 12.08.2016

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

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

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

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