.height()

Получить текущую вычисленную высоту для первого элемента в наборе совпавших элементов или установить высоту каждого совпавшего элемента.

Содержание:

.height()
- .height()
.height( значение )
- .height( значение )
- .height( функция )

.height()Возвращает: Число

Описание: Получить текущую вычисленную высоту для первого элемента в наборе совпавших элементов.

версия добавлена: 1.0.height()
- Этот метод не принимает никаких аргументов.

Разница между .css( "height" ) и .height() заключается в том, что последний возвращает значение в пикселях без единиц измерения (например, 400), а первый — сохраненными единицами измерения (например, 400px). Рекомендуется использовать метод .height(), когда высота элемента требуется для математических вычислений.

Рисунок 1 — Иллюстрация измеренной высоты

Этот метод также может находить высоту окна и документа.

// Returns height of browser viewport
$( window ).height();
 
// Returns height of HTML document
$( document ).height();

Обратите внимание, что .height() всегда возвращает высоту содержимого, независимо от значения свойства CSS box-sizing. Начиная с jQuery 1.8, это может потребовать извлечения высоты CSS плюс свойства box-sizing и затем вычитания потенциальных границ и отступов для каждого элемента, когда у элемента есть box-sizing: border-box. Чтобы избежать этой накладной, используйте .css( "height" ) вместо .height().

Примечание: Хотя теги style и script будут сообщать значение для .width() или height() при абсолютном позиционировании и задании display:block, настоятельно не рекомендуется вызывать эти методы для этих тегов. Помимо того, что это плохая практика, результаты могут также оказаться ненадежными.

Дополнительные заметки:

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

Пример:

Показать различные высоты. Обратите внимание, что значения взяты из iframe, поэтому могут быть меньше, чем вы ожидали. Желтый выделенный фрагмент показывает тело iframe.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>height demo</title>
  <style>
  body {
    background: yellow;
  }
  button {
    font-size: 12px;
    margin: 2px;
  }
  p {
    width: 150px;
    border: 1px red solid;
  }
  div {
    color: red;
    font-weight: bold;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
 
<button id="getp">Get Paragraph Height</button>
<button id="getd">Get Document Height</button>
<button id="getw">Get Window Height</button>
 
<div>&nbsp;</div>
<p>
  Sample paragraph to test height
</p>
 
<script>
function showHeight( element, height ) {
  $( "div" ).text( "The height for the " + element + " is " + height + "px." );
}
$( "#getp" ).on( "click", function() {
  showHeight( "paragraph", $( "p" ).height() );
});
$( "#getd" ).on( "click", function() {
  showHeight( "document", $( document ).height() );
});
$( "#getw" ).on( "click", function() {
  showHeight( "window", $( window ).height() );
});
</script>
 
</body>
</html>

Демо:

.height( значение )Возвращает: jQuery

Описание: Установить CSS высоту каждого совпавшего элемента.

версия добавлена: 1.0.height( значение )
- значение
  
  Тип: Строка или Число
  
  Целое число, представляющее количество пикселей, или целое число с необязательной единицей измерения (в виде строки).
версия добавлена: 1.4.1.height( функция )
- функция
  
  Тип: Функция( Целое число индекс, Целое число высота ) => Строка или Число
  
  Функция, возвращающая высоту для установки. Принимает порядковый номер элемента в наборе и старую высоту в качестве аргументов. Внутри функции, this относится к текущему элементу в наборе.

При вызове .height(value), значение может быть строкой (число и единица) или числом. Если для значения указано только число, jQuery предполагает единицу измерения пикселей. Однако, если указана строка, необходимо указать допустимую единицу измерения CSS для высоты (например, 100px, 50%, или auto). Обратите внимание, что в современных браузерах свойство CSS height не включает отступы, границы или отступы.

Если явная единица измерения не была указана (например, 'em' или '%'), к значению добавляется "px".

Обратите внимание, что .height(value) устанавливает высоту содержимого блока независимо от значения свойства CSS box-sizing.

Пример:

Установить высоту каждого div при нажатии на 30 пикселей и изменить цвет.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>height demo</title>
  <style>
  div {
    width: 50px;
    height: 70px;
    float: left;
    margin: 5px;
    background: rgb(255,140,0);
    cursor: pointer;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
 
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
 
<script>
$( "div" ).one( "click", function() {
  $( this ).height( 30 ).css({
    cursor: "auto",
    backgroundColor: "green"
  });
});
</script>
 
</body>
</html>

Содержание:

.height()Возвращает: Число

версия добавлена: 1.0.height()

Дополнительные заметки:

Пример:

Демо:

.height( значение )Возвращает: jQuery

версия добавлена: 1.0.height( значение )

версия добавлена: 1.4.1.height( функция )

Пример:

Демо: