Méthode height() jQuery

jQuery HTML/Méthodes CSS

La méthode height() permet de获取或设置所选元素的高度。

Lorsque la méthode height() est utilisée pourObtenirLa hauteur, il retourneraLe premier élément sélectionnéde la hauteur.

Lorsque la méthode height() est utilisée pourDéfinirEn définissant la hauteur, il définiraTous les éléments sélectionnésde la hauteur.

Comme indiqué dans l'image suivante, la méthode height() ne contient pas de padding, de bordure ou de marge :

La valeur de la hauteur peut également être relative. Si une valeur est fournie en préfixe+=ou-=Séquence de caractères, le calcul de la hauteur cible est effectué en ajoutant ou en soustrayant la valeur donnée à la valeur actuelle (par exemple height("+ = 50"））。

Syntaxe :

Obtenir la hauteur :

$(selector).height()

Définir la hauteur :

$(selector).height(value)

Définir la hauteur en utilisant une fonction :

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

Exemple

Obtenir la hauteur de l'élément DIV :

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

Définir la hauteur de tous les paragraphes :

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

Définir la hauteur de tous les paragraphes avec différentes unités :

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

Augmenter la hauteur de tous les paragraphes au clic du bouton (utiliser la fonction) :

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

La méthode height() peut également trouver la hauteur de la fenêtre et du document :

$(window).height();//　Retourner la hauteur de la fenêtre du navigateur
$(document).height();　　//　Retourner la hauteur du document HTML

Afficher la différence entre width() et height(), innerHeight(), innerWidth(), outerWidth() et outerHeight() :

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

Ajouter un effet de défilement lisse lorsque l'utilisateur fait défiler la page :

let size = $(".main").height();　//　Obtenir "main" taille
$(window).keydown(function(event)　{
　　if(event.which　===　40)　{　//　Si vous appuyez sur la flèche vers le bas
　　　　$("html,　body").animate({scrollTop:　"+="　+　size},　300);
　　}　else　if(event.which　===　38)　{　//　Si vous appuyez sur la flèche vers le haut
　　　　$("html,　body").animate({scrollTop:　"-="　+　size},　300);
　　}
});

Valeur du paramètre

jQuery HTML/Méthodes CSS