jQuery height() 方法

Методы HTML/CSS jQuery

height()方法获取或设置所选元素的高度。

当height()方法用于获取高度时，它将返回第一个选定元素的高度。

当height()方法用于设置高度时，它将设置所有选定元素的高度。

如图所示，height()方法不包含padding，border或margin：

Значение высоты также может быть относительным. Если для значения предоставлен префикс+=или-=Если передается строка символов, то рассчитывается целевая высота, добавляя или вычитая из текущей значения, указанного в данном значении (например, height("+ = 50")).

Грамматика:

Получить высоту:

$(selector).height()

Установить высоту:

$(selector).height(value)

Установить высоту с использованием функции:

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

Пример

Получить высоту элемента DIV:

$("div").click(function(){
　　$(this).height();
});

Установить высоту всех абзацев:

$("button").click(function(){
　　$("p").height(50);
});

Установить высоту всех абзацев с использованием различных единиц измерения:

$("#btn1").click(function(){
　　$("p").height(50);
});
$("#btn2").click(function(){
　　$("p").height("7em");
});
$("#btn3").click(function(){
　　$("p").height("100vh");
});

Увеличить высоту всех абзацев при нажатии на кнопку (используя функцию):

$("button").click(function(){
　　$("p").height(function(i, val){
　　　　return val * 2;
　　});
});

Метод height() также может найти высоту окна и документа:

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

Показать различия между width(), height(), innerHeight(), innerWidth(), outerWidth() и outerHeight():

$("button").click(function(){
　　$("div").width();
　　$("div").innerWidth();
　　$("div").outerWidth();
　　$("div").height();
　　$("div").innerHeight();
　　$("div").outerHeight();
});

Добавить эффект плавного скролла при прокрутке страницы пользователем:

let size = $(".main").height(); // Получить высоту ".main"
$(window).keydown(function(event) {}}
　　if(event.which === 40) { // Если нажата клавиша вниз
　　　　$("html, body").animate({scrollTop: "+=" + size}, 300);
　　} else if(event.which === 38) { // Если нажата клавиша вверх
　　　　$("html, body").animate({scrollTop: "-=" + size}, 300);
　　}
});

Значение параметра

Методы HTML/CSS jQuery