Méthode height

La méthode height permet d'obtenir et de modifier la hauteur d'un élément. Il est important de se souvenir que nous obtiendrons la 'valeur calculée' de la hauteur (computed height). Contrairement à la méthode css('height'), elle retourne une valeur sans unité (par exemple 400) et est pratique pour les calculs mathématiques. La méthode obtient la hauteur du contenu de l'élément, indépendamment de la définition de la propriété CSS box-sizing. Pour éviter des calculs inutiles, il est recommandé d'utiliser css('height'). Des erreurs de calcul peuvent également survenir si l'utilisateur change les dimensions de la page, ou si l'élément ou son parent sont masqués. La valeur de la hauteur ne prend pas en compte les valeurs des marges intérieures et de la bordure.

Syntaxe

Obtenir la hauteur de l'élément. Dans certains cas les valeurs obtenues peuvent être fractionnaires :

$(sélecteur).height();

Pour modifier la hauteur de l'élément - on peut passer simplement un nombre (par exemple 400), auquel cas les unités de mesure seront des pixels, ou une chaîne de caractères, avec indication des unités de mesure (par exemple '10em') :

$(sélecteur).height(nouvelle valeur);

Nous pouvons également appliquer une fonction donnée à chaque élément dans le ensemble. Dans ce cas, le premier paramètre de la fonction recevra le numéro de l'élément dans le ensemble, et le second paramètre - la valeur actuelle de la hauteur définie pour l'élément spécifique. this à l'intérieur de la fonction pointera vers l'élément courant.

La valeur de la hauteur de l'élément changera pour celle renvoyée par la fonction :

$(sélecteur).height(function(numéro dans le ensemble, valeur actuelle de la hauteur));

Exemple

Au clic sur #test, modifions sa hauteur pour la valeur 30px, en utilisant la méthode height, et également avec css changeons son fond en vert :

<div id="test"></div>

#test {
	width: 50px; 
	height: 90px;
	background: red; 
	color: white;
	margin-top: 10px; 
	cursor: pointer;
}

$('#test').one('click', function() {
	$(this).height(30).css({
		cursor: 'auto',
		backgroundColor: 'green'
	});
});

Voir aussi

la méthode width,
qui permet d'obtenir et de modifier la largeur d'un élément
la méthode innerHeight,
qui permet d'obtenir et de modifier la hauteur d'un élément, en tenant compte de ses marges intérieures
la méthode outerHeight,
qui permet d'obtenir et de modifier la hauteur d'un élément, en tenant compte de ses marges et de sa bordure
la méthode css,
qui permet d'obtenir et de modifier les styles CSS d'un élément