jQuery : différence entre height et outerheight

Août 2013

Dans jQuery, les fonctions .height() et .width() retournent respectivement la hauteur et la largeur d'un élément. Dans cet exemple ci-dessous :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery height outerHeight</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<style>
#test {
	width:125px;
	height:125px;
	margin:10px;
	padding:10px;
	border:5px solid red;
	background:yellow;
}
</style>

</head>
<body>
	<div id="test"></div>
</body>
</html>

Voici ce que retournent ces fonctions :

$('#test').height(); // => 125
$('#test').width();  // => 125

Le problème c'est que height et width retournent les dimensions internes, et pas la taille réelle occupée par l'élément dans la page. En fait, les marges ainsi que l'épaisseur de la bordure n'entrent pas dans le calcul de height et width.

Dans un tout autre contexte, cet article est très intéressant : fond dégradé sur excel.

Pour obtenir la largeur totale de l'élément dans la page, il faut utiliser les fonctions .outerHeight() et .outerWidth() :

$('#test').outerHeight(); // => 155
$('#test').outerWidth();  // => 155

Les 30px de différence que l'on observe correspondent aux marges (margin-left + margin-right soit 2*10 = 20px) plus la largeur de la bordure gauche et de la bordure droite : 2*5 = 10px.

Découvrez ce tutoriel photoshop : dessiner un ballon de plage à lire tout de suite !

0 commentaire
facultatif
Facebook Twitter RSS Email
Forum Excel
Venez découvrir le nouveau forum excel question/réponse à la stackoverflow.com !
Forum Excel
hit parade n'en a rien a foutre du W3C Positionnement et Statistiques Gratuites Vincent Paré