Le dimensionnement d’un élément en jQuery
Le dimensionnement d’un élément en jQuery
-
Objectifs
- Etre capable d’utiliser la méthode css() en jQuery
-
Présentation
- Dans cette partie, nous verrons les méthodes de calcul de dimensions
.width(),.innerWidth(),.outerWidth(),.height(),.innerHeight(),.outerHeight(). - Voici le modèle de boite suivant lequel se base les méthodes.
-
Les méthodes de dimensionnement
- Avec jQuery, une série de méthodes sont relatives à la dimension des éléments. On a:
-
La méthode width()
- La méthode
width()qui renvoie la largeur d’un élément, exprimée en pixels; cette méthode renvoie une chaîne de caractères. - Elle retourne la largeur d’un élément. Les padding, border et les margin ne sont pas compris dans le calcul.
-
La méthode height()
- La méthode
height()qui renvoie la hauteur d’un élément, exprimée en pixels; cette méthode renvoie une chaîne de caractères. -
La méthode width(une_valeur)
- La méthode
width(une_valeur)qui assigne une largeur une_valeur aux éléments spécifiés; si aucune unité n’est spécifiée (comme em ou %), l’unité pixel (px) sera choisie par défaut. -
La méthode height(une_valeur)
- La méthode
height(une_valeur)qui assigne une hauteur une_valeur aux éléments spécifiés; si aucune unité n’est spécifiée (comme em ou %), l’unité pixel (px) sera choisie par défaut. -
La méthode innerWidth()
-
La méthode
innerWidth()qui renvoie la largeur intérieure (la bordure est exclue mais le padding est inclus) du premier élément trouvé répondant à la sélection (largeur intérieure exprimée en pixels). - Exemple:Obtenir la largeur intérieure d’un paragraphe.
-
La méthode innerHeight()
-
La méthode
innerHeight()qui renvoie la hauteur intérieure (la bordure est exclue mais le padding est inclus) du premier élément trouvé répondant à la sélection (hauteur intérieure exprimée en pixels). - Elle définit ou retourne la hauteur d’un élément. Les padding sont compris dans le calcul mais pas les border et les margin.
- Exemple:Obtenir la hauteur intérieure d’un paragraphe.
-
La méthode outerWidth()
- La méthode
outerWidth()qui renvoie la largeur extérieure (incluant la bordure et le padding par défaut) du premier élément trouvé répondant à la sélection (largeur extérieure exprimée en pixels). -
La méthode outerHeight()
- La méthode
outerHeight()qui renvoie la hauteur extérieure (incluant la bordure et le padding par défaut) du premier élément trouvé répondant à la sélection (hauteur extérieure exprimée en pixels). -
La méthode resize()
- La méthode
resize()sert à écouter l’événement de redimensionnement du navigateur. - Prenons un exemple plus intrusif qui nous servira juste à voir le fonctionnement de cette méthode.
- Comme la méthode
.resize()n’est qu’un raccourci.on( "resize", handler ), le détachement est possible en utilisant.off( "resize" ). - Cette méthode sera bien utile pour adapter certains de vos scripts au responsive webdesign.
-
Application
-
Énoncé
- Dans une page HTML "appDimentionnement.html",créer un élément "div" qui contient à son tour trois éléments "li"(dans un ul) alignés
- Colorer les éléments "li" avec des couleurs différentes
- Remplir les trois div avec les textes suivants:
- contenu li_01:Je suis un élément qui appelle la classe: box-list-item
- contenu li_02:Je suis un élément qui appelle la classe : box-list-item avec float: left;width: 33.333%;padding: 10px;
- contenu li_03:Je suis un élément qui appelle la classe : box-list-item avec float: left;width: 33.333%;padding: 10px; et d’autres propriétés .box-list-item { color: #fff },.box-list-item:nth-child(1){ background: #000 },.box-list-item:nth-child(2){ background: #09f } et
.box-list-item:nth-child(3) { background: #f09 } - Créer une fonction jQuery qui permet d’uniformiser la hauteur des éléments li
-
Solution
$(window).resize(function() {
alert('Je redimensionne mon navigateur');
});<style>
.box {
padding: 10px;
overflow: hidden;
}
.box-list {
padding-left: 0;
list-style: none;
}
.box-list-item {
float: left;
width: 33.333%;
padding: 10px;
}
.box-list-item { color: #fff }
.box-list-item:nth-child(1) { background: rgb(240, 235, 235) }
.box-list-item:nth-child(2) { background: #09f }
.box-list-item:nth-child(3) { background: #f09 }
</style>
</head>
<body>
<div class="box">
<ul class="box-list">
<li class="box-list-item">Je suis un élément qui appelle la classe: box-list-item.</li>
<li class="box-list-item">Je suis un élément qui appelle la classe : box-list-item avec float: left;width: 33.333%;padding: 10px;</li>
<li class="box-list-item">Je suis un élément qui appelle la classe : box-list-item avec float: left;width: 33.333%;padding: 10px; et d’autres propriétés .box-list-item { color: #fff },.box-list-item:nth-child(1){ background: #000 },.box-list-item:nth-child(2){ background: #09f } et
.box-list-item:nth-child(3) { background: #f09 }</li>
</ul>
</div>
<script>
// Création de la fonction
function sameHeight(elem) {
// initialisation de la hauteur de base à 0
var hauteurest = 0;
// Parcours de tous les éléments
elem.each(function() {
// Mise en variable de la hauteur de l'élément
var thisHeight = $(this).height();
// Condition pour savoir si la hauteur de l'élément est plus grande que 'tallest'
if(thisHeight > hauteurest) {
// Si l'élément est plus grand, nous assignons la nouvelle valeur à 'tallest'
hauteurest = thisHeight;
}
});
// Nous appliquons le style CSS sur l'élément
elem.height(hauteurest);
}
$(function(){
// Lancer la fonction quand le DOM est ready
sameHeight( $('.box-list-item') );
});
</script>