jQuery : différence entre height et outerheight
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(); // => 125Le 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 !
