jQuery метод .innerHeight()

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

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

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

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

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

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

jQuery синтаксис:

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

Синтаксис 1.0:

$( selector ).innerHeight() // метод используется без параметров

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

Синтаксис 1.0:

$( selector ).innerHeight( value )

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

Синтаксис 1.8.0:

$( selector ).innerHeight(function( index, currentValue ))

index - Integer

currentValue - Number.

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

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

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

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

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

index.html

HTML

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

main.js

JavaScript

$(document).ready(function () {
    var innerHeightFirst = $('.first').innerHeight() // инициализируем переменную со значением внутренней высоты элемента с классом first
    var innerHeightSecond = $('.second').innerHeight() // инициализируем переменную со значением внутренней высоты элемента с классом second
    $('.first').text('content-box' + innerHeightFirst) // добавляем текстовое содержимое элементу с классом first
    $('.second').text('border-box' + innerHeightSecond) // добавляем текстовое содержимое элементу с классом 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 метода .innerHeight() инициализируем переменные, которые содержат значением внутренней высоты элемента с классом first и с классом second. После этого с использованием метода .text() добавляем эти значения внутри элементов с классом first и с классом second.

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

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

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

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

index.html

HTML

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

main.js

JavaScript

$(document).ready(function () {
    var innerHeightFirst = $('.first').innerHeight()
    var innerHeightSecond = $('.second').innerHeight()
    $('.first').text('content-box ' + innerHeightFirst)
    $('.second').text('border-box ' + innerHeightSecond)

    $('button').click(function () {
        $('.first').innerHeight(50)
        $('.second').innerHeight(50)
        innerHeightFirst = $('.first').innerHeight()
        innerHeightSecond = $('.second').innerHeight()
        $('.first').text('content-box ' + innerHeightFirst)
        $('.second').text('border-box ' + innerHeightSecond)
    })
})

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 метода .innerHeight() инициализируем переменные, которые содержат значением внутренней высоты элемента с классом first и с классом second. После этого с использованием метода .text() добавляем эти значения внутри элементов с классом first и с классом second.

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

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

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

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

index.html

HTML

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

main.js

JavaScript

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

style.css

CSS

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

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