jQuery метод .height()

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

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

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

jQuery метод .height() также сможете найти высоту окна, или документа:

$( document ).height() // возвращает высоту HTML документа

$( window ).height() // возвращает высоту области просмотра браузера

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

Метод с версии jQuery 1.8 вычисляет и возвращает высоту элемента независимо от того какая модель вычисления ширины и высоты используется (content-box, или border-box свойства box-sizing). То есть метод будет вычитать границы и внутренние отступы. Если Вас это не устраивает, то используйте метод .css( "width" ). Пример сравнения двух моделей и этих методов представлен ниже.

jQuery синтаксис:

Возвращение значений:

Синтаксис 1.0:

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

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

Синтаксис 1.0:

$( selector ).height( value )

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

Синтаксис 1.4.1:

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

index - Integer

currentValue - Integer.

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

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

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

<button>Клик</button>
<p style="height: 5em">Обычный абзац</p>
<p style="height: 5em">Второй обычный абзац</p>

$(document).ready(function () {
    $('button').click(function () {
        // задаем функцию при нажатиии на элемент <button>
        console.log($('p').css('height')) // используя метод .css() возвращаем и выводим в консоль браузера значение высоты первого элемента <p>
        console.log($('p').height()) // используя метод .height() возвращаем и выводим в консоль браузера значение ширины первого элемента <p>
        console.log($(document).height()) // возвращает и выводит в консоль браузера  высоту HTML документа
        console.log($(window).height()) // возвращает и выводит в консоль браузера высоту области просмотра браузера
    })
})

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

В этом примере мы при нажатии на кнопку:

• с использованием jQuery метода .css() возвращаем и выводим в консоль браузера значение высоты первого элемента <p>.
• с использованием jQuery метода .height() возвращаем и выводим в консоль браузера значение высоты первого элемента <p>, высоту HTML документа и значение высоты области просмотра браузера.

Рассмотрим следующий пример в котором мы рассмотрим отличие метода .height() от метода .css() при использовании моделей вычисления ширины и высоты элементов content-box и border-box:

<button>Клик</button>
<p class="test1">Обычный абзац</p>
<p class="test2">Обычный абзац</p>

$(document).ready(function () {
    $('button').click(function () {
        // задаем функцию при нажатиии на элемент <button>
        console.log($('.test1').css('height')) // используя метод .css() возвращаем и выводим в консоль браузера значение высоты элемента с классом .test1
        console.log($('.test1').height()) // используя метод .height() возвращаем и выводим в консоль браузера значение высоты элемента с классом .test1
        console.log($('.test2').css('height')) // используя метод .css() возвращаем и выводим в консоль браузера значение высоты элемента с классом .test2
        console.log($('.test2').height()) // возвращает и выводит в консоль браузера значение высоты элемента с классом .test2
    })
})

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

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

В этом примере мы при нажатии на кнопку:

• с использованием jQuery метода .css() возвращаем и выводим в консоль браузера значение высоты элемента <p> с классом test1 и test2. Обратите внимание независимо от того какую модель используют элементы результат вывода будет один.
• с использованием jQuery метода .height() возвращаем и выводим в консоль браузера значение высоты элемента <p> с классом test1 и test2. Обратите внимание, что во втором случае, где элемент <p> использует модель border-box, значение вывода не включает в себя как границы элемента, так и внутренние отступы. В этом заключается отличие этого метода от метода .css() при использовании метода border-box.

Рассмотрим следующий пример в котором с помощью метода .height() мы будем устанавливать значения высоты, а не возвращать.

<button>Клик</button>
<div class="test1">1</div>
<div class="test2">2</div>
<div class="test3">3</div>
<div class="test4">4</div>

$(document).ready(function () {
    $('button').click(function () {
        $('.test1').height(50)
        $('.test2').height('30%')
    })
})

body,
html {
    height: 90%;
}
div {
    margin-bottom: 10px;
    height: 20px;
    background-color: orange;
}

В этом примере мы при нажатии на кнопку с использованием jQuery метода .height() устанавливаем значение высоты элементам <div> с классом test1 равную 150 пикселей, а элементам с классом test2 значение ширины равную 30% от родительского элемента.

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

<div class="test1"></div>
<div class="test2"></div>

$(document).ready(function () {
    $('div').click(function () {
        $(this).height(function (index, currentValue) {
            return currentValue - 50
        })
    })
})

body,
html {
    height: 90%;
}
div {
    float: left;
    background-color: yellow;
    margin-right: 25px;
    height: 90%;
    width: 100px;
}

В этом примере мы в качестве параметра метода .height() передаем функцию, которая возвращает и устанавливает новое значение высоты элемента <div> по которому произведен клик. В нашем случае новая высота элемента высчитывается как текущая высота элемента минус 50 пикселей.

Рассмотрим следующий пример в котором с помощью метода .resize() и метода .height() будем отслеживать высоту области просмотра браузера и при её изменении устанавливать определённый цвет заднего фона.

<h1>Try to resize window</h1>

$(document).ready(function () {
    $(window).resize(function () {
        // привязываем обработчик событий (срабатывает при изменении размеров окна)
        if ($(this).height() < 600 && $(this).height() > 400) {
            // Если высота области просмотра меньше 600 пикселей и больше 400 пикселей
            $('body').css('background-color', 'yellow') // устанавливаем цвет заднего фона желтый
        } else if ($(this).height() < 800 && $(this).height() > 600) {
            // Если высота области просмотра меньше 600 пикселей и больше 400 пикселей
            $('body').css('background-color', 'green') // устанавливаем цвет заднего фона зеленый
        } else {
            // если не соответствует ни одному условию
            $('body').css('background-color', 'blue') // устанавливаем цвет заднего фона синий
        }
    })
})

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

В этом примере с помощью метода .resize() и метода .height() мы отслеживаем высоту области просмотра браузера и при её изменении устанавливаем определённый цвет заднего фона элементу <body>. Если высота области просмотра меньше 800 пикселей и больше 600 пикселей, то цвет заднего фона будет установлен желтый. Если высота области просмотра меньше 600 пикселей и больше 400 пикселей, то цвет заднего фона будет установлен зеленый, в других случаях цвет заднего фона будет установлен как синий.

Обратите внимание, что при загрузке страницы цвет будет белый, так как функция запуститься только при изменении размеров окна (jQuery метод .resize()).