jQuery метод .outerHeight()

Определение и применение

jQuery метод .outerHeight() получает текущее вычисленное значение внешней высоты (включая внутренние отступы - padding, границы - border и при необходимости внешние отступы - margin) для первого элемента в наборе совпавших элементов, или устанавливает внешнюю высоту каждого соответствующего элемента.

Наглядное отображение использования jQuery методов .outerHeight() и .outerWidth().

Для получения текущего значения вычисленного значения внешней ширины элемента (включая внутренние отступы, границы и при необходимости внешние отступы) для первого элемента в наборе совпавших элементов, или установить внешнюю ширину каждого соответствующего элемента вы можете воспользоваться методом .outerWidth().

Если метод .outerHeight() вызывается на пустом наборе элементов, то возвращаемое значение будет undefined (до версии jQuery 3.0 значение null).

jQuery метод .outerHeight() не гарантирует точность в том случае, когда элемент, или его родитель скрыт. Чтобы получить точное значение, убедитесь, что элемент является видимым перед использованием метода. jQuery будет пытаться временно показать, а затем снова скрыть элемент для того, чтобы измерить его размеры, но в этом случае метод не является надежным, это может влиять на производительность страницы. Подобная функция измерения может быть удалена в следующей версии библиотеки jQuery.

jQuery синтаксис:

Получение значения:

Синтаксис 1.2.6:

$( selector ).outerHeight()
$( selector ).outerHeight( includeMargin ) // получение значения с внешними отступами

includeMargin - Boolean

Установка значений:

Синтаксис 1.8.0:

$( selector ).outerHeight( value )
$( selector ).outerHeight(function( index, currentValue ))

value - String (значение в произвольных единицах измерения), или Integer (значение в пикселях)

index - Integer

currentValue - Number.

Добавлен в версии jQuery

Значения параметров

Пример использования

Метод .outerHeight() — пример 1

Нажмите ▶. Измените JavaScript и запустите пример повторно. Используется jQuery 3.1.1.

index.html

HTML

<div class="first"></div>
<div class="second"></div>

main.js

JavaScript

$(document).ready(function () {
    var outerHeightFirst = $('.first').outerHeight() // инициализируем переменную со значением внешней высоты элемента с классом first
    var outerHeightFirstWithMargin = $('.first').outerHeight(true) // инициализируем переменную со значением внешней высоты элемента с классом first, включающую внешние отступы
    var outerHeightSecond = $('.second').outerHeight() // инициализируем переменную со значением внешней высоты элемента с классом second
    var outerHeightSecondWithMargin = $('.second').outerHeight(true) // инициализируем переменную со значением внешней высоты элемента с классом second, включающую внешние отступы
    $('.first').text('content-box ' + outerHeightFirst + '/' + outerHeightFirstWithMargin) // добавляем текстовое содержимое элементу с классом first
    $('.second').text('border-box ' + outerHeightSecond + '/' + outerHeightSecondWithMargin) // добавляем текстовое содержимое элементу с классом second
})

style.css

CSS

body {
  margin: 16px;
  font:
    16px/1.5 system-ui,
    sans-serif;
  overflow-wrap: anywhere;
}
img,
input,
select,
textarea,
button {
  max-width: 100%;
}

.first {
  width: 100px; /* ширина элемента */
  height: 100px; /* высота элемента */
  padding: 10px; /* внутренние отступы */
  margin: 10px; /* внешние отступы */
  border: 5px solid green; /* сплошная граница размером 5 пикселей зеленого цвета */
  box-sizing: content-box; /* значения ширины и высоты не включают в себя границы (border) и внутренние отступы (padding), а только содержание элемента */
}
.second {
  width: 100px; /* ширина элемента */
  height: 100px; /* высота элемента */
  padding: 10px; /* внутренние отступы */
  margin: 10px; /* внешние отступы */
  border: 5px solid red; /* сплошная граница размером 5 пикселей красного цвета */
  box-sizing: border-box; /* значения ширины и высоты включают в себя содержание элемента, границы (border) и внутренние отступы (padding) */
}

В этом примере мы при загрузке документа с использованием jQuery метода .outerHeight() инициализируем четыре переменные, которые содержат значения внешней высоты элементов с классом first и с классом second как с внешними отступами (margin), так и без них. Обратите внимание, что для того, чтобы получить значение с внешними отступами элемента необходимо дополнительно с методом .outerHeight() передать в качестве параметра логическое значение true.

После этого с использованием метода jQuery .text() добавляем значения переменных внутри элементов с классом first и с классом second. Обратите внимание, что свойство height не включает в себя внутренние отступы, границу, или внешние отступы, если используется CSS свойство box-sizing со значением content-box (значение по умолчанию).

Рассмотрим следующий пример в котором мы как получим, так и установим значение внешней высоты:

Пример использования jQuery метода .outerHeight() (установка значения)

Нажмите ▶, затем выполните действие из пояснения. Измените JavaScript и запустите пример ещё раз. В редакторе используется jQuery 3.1.1.

index.html

HTML

<button>Клик</button>
<div class="first"></div>
<div class="second"></div>

main.js

JavaScript

$(document).ready(function () {
    var outerHeightFirst = $('.first').outerHeight()
    var outerHeightSecond = $('.second').outerHeight()
    $('.first').text('content-box ' + outerHeightFirst)
    $('.second').text('border-box ' + outerHeightSecond)

    $('button').click(function () {
        $('.first').outerHeight(80)
        $('.second').outerHeight(80)
        outerHeightFirst = $('.first').outerHeight()
        outerHeightSecond = $('.second').outerHeight()
        $('.first').text('content-box ' + outerHeightFirst)
        $('.second').text('border-box ' + outerHeightSecond)
    })
})

style.css

CSS

.first {
    width: 100px;
    height: 100px;
    padding: 10px;
    margin: 10px;
    border: 5px solid green;
    box-sizing: content-box;
}
.second {
    width: 100px;
    height: 100px;
    padding: 10px;
    margin: 10px;
    border: 5px solid red;
    box-sizing: border-box;
}

В этом примере по аналогии с предыдущим примером мы при загрузке документа с использованием jQuery метода .outerHeight() инициализируем переменные, которые содержат значения внешней высоты элемента с классом first и с классом second (внешние отступы в расчет не включаются). После этого с использованием метода .text() добавляем эти значения внутри элементов с классом first и с классом second.

Кроме того, мы разместили кнопку, при нажатии на которую, мы устанавливаем внешнюю высоту равную 80 пикселям каждому элементу. При этом зрительно мы получим один и тот же результат независимо от значения свойства box-sizing, но при этом учитывайте, что значение высоты (height) у элементов будет разным.

Рассмотрим следующий пример в котором мы передадим в качестве параметра метода .outerHeight() функцию:

Пример использования jQuery метода .outerHeight() (функция в качестве параметра)

Нажмите ▶, затем выполните действие из пояснения. Измените JavaScript и запустите пример ещё раз. В редакторе используется jQuery 3.1.1.

index.html

HTML

<button>Клик</button><br />
<div></div>
<div></div>
<div></div>

main.js

JavaScript

$(document).ready(function () {
    $('button').click(function () {
        var x = $('div').outerHeight()
        $('div').outerHeight(function (index, currentOuterHeight) {
            x += 30
            return (currentOuterHeight += x)
        })
    })
})

style.css

CSS

div {
    display: inline-block;
    width: 10px;
    height: 50px;
    padding: 10px;
    margin: 10px;
    border: 1px solid orange;
    transition: 2s;
}

В этом примере мы при нажатии на кнопку передаем методу .outerHeight() функцию, которая возвращает новое значение внешней высоты и устанавливает её выбранным элементам в зависимости от их индекса. Перед каждой установкой значения, мы увеличиваем значение переменной на 30 и прибавляем его к значению внешней высоты элемента.