Méthode outerHeight

La méthode outerHeight permet d'obtenir et de modifier la hauteur d'un élément en prenant en compte les marges intérieures, la bordure et sélectivement - les marges extérieures de l'élément. Il est important de se souvenir que nous obtiendrons la 'valeur calculée' de la hauteur (computed height). Des erreurs de calcul peuvent également survenir si l'utilisateur modifie les dimensions de la page, ou si l'élément ou son parent sont masqués.

Syntaxe

Ainsi nous pouvons obtenir la hauteur de l'élément. Cette méthode peut accepter un paramètre optionnel sous la forme de true ou false (false est la valeur par défaut), selon que les marges extérieures seront prises en compte ou non. Dans certains cas, les valeurs obtenues peuvent être fractionnaires :

$(sélecteur).outerWidth([incluant_margin]);

Pour modifier la hauteur de l'élément - on peut simplement transmettre 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).outerHeight(nouvelle valeur, [incluant_margin]);

Nous pouvons également appliquer une fonction définie à 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).outerHeight(function(numéro dans le ensemble, valeur actuelle de la hauteur));

Exemple

Comparons les informations sur la hauteur du paragraphe #test, obtenues par les méthodes height, innerHeight et outerHeight :

<p id="test">text</p>
<p id="out1"></p>
<p id="out2"></p>
<p id="out3"></p>
<p id="out4"></p>

p {
	margin: 10px;
	padding: 5px;
	border: 2px solid blue;
}

let h1 = $('#test').height();
let h2 = $('#test').innerHeight();
let h3 = $('#test').outerHeight();
let h4 = $('#test').outerHeight(true);

$('#out1').text(h1);
$('#out2').text(h2);
$('#out3').text(h3);
$('#out4').text(h4);

Voir aussi

la méthode height,
qui permet d'obtenir et de modifier la hauteur d'un élément
la méthode innerHeight,
qui permet d'obtenir et de modifier la hauteur d'un élément, en prenant en compte ses marges intérieures