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" ).
$(window).resize(function() {
alert('Je redimensionne mon navigateur');
});
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
<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>