La méthode .css() de jQuery pour la gestion des styles
La bibliothèque jQuery simplifie considérablement la manipulation des styles CSS pour les éléments HTML. La méthode .css() est l'outil central pour cette tâche, offrant une approche plus concise et moins verbeuse que le JavaScript natif, surtout pour les modifications multiples ou en masse.
Comparaison: JavaScript natif vs. jQuery pour les styles
Modifier les styles avec JavaScript pur peut rapidement devenir répétitif. Voici un exemple illustrant cette différence:
Exemple en JavaScript natif:
<body>
<div>Ceci est un élément div</div>
<button id="btnModifierStyles">Appliquer Styles</button>
<script>
window.onload = function() {
var boutonModifier = document.getElementById("btnModifierStyles");
boutonModifier.onclick = function() {
var divCible = document.getElementsByTagName("div")[0];
divCible.style.height = "50px";
divCible.style.width = "200px";
divCible.style.backgroundColor = "red"; // Propriétés CSS en camelCase
};
};
</script>
</body>
Exemple avec la méthode .css() de jQuery:
<body>
<div>Ceci est un élément div</div>
<button id="btnModifierStyles">Appliquer Styles</button>
<script src="jquery-3.2.1.js"></script>
<script>
$(document).ready(function() { // Exécute le code après le chargement complet du DOM
$("#btnModifierStyles").on("click", function() {
// Utilisation de la méthode .css() pour appliquer plusieurs styles de manière chaînée
$("div").css("height", "50px")
.css("width", "200px")
.css("background-color", "red"); // Nom de propriété CSS standard
});
});
</script>
</body>
Syntaxes de la méthode .css()
jQuery propose plusieurs façons d'utiliser .css() pour une flexibilité maximale:
- Définir une seule propriété:
$("sélecteur").css("nom-propriété", "valeur"); - Définir plusieurs propriétés de manière chaînée:
$("sélecteur").css("prop1", "valeur1").css("prop2", "valeur2")...; - Définir plusieurs propriétés à l'aide d'un objet JavaScript:
$("sélecteur").css({ "prop1": "valeur1", "prop2": "valeur2", ... });Cette syntaxe est souvent préférée pour sa lisibilité et son efficacité lors de l'application de multiples styles.
<script>
$(document).ready(function() {
$("#btnModifierStyles").on("click", function() {
// Option 1: Définir une propriété à la fois (moins efficace pour plusieurs modifications)
// $("div").css("height", "50px");
// $("div").css("width", "200px");
// $("div").css("background-color", "red");
// Option 2: Chaînage pour plusieurs propriétés (plus compact)
// $("div").css("height", "50px").css("width", "200px").css("background-color", "red");
// Option 3: Utilisation d'un objet pour définir plusieurs propriétés (syntaxe recommandée)
$("div").css({
"height": "100px",
"width": "250px",
"background-color": "blue",
"border-radius": "5px" // Exemple de propriété CSS supplémentaire
});
// Récupérer la valeur d'une propriété CSS (sans deuxième argument)
console.log("Largeur actuelle du div: " + $("div").css("width"));
});
});
</script>
Gestion des classes CSS avec jQuery
Au-delà de la modification directe des styles, jQuery excelle dans la manipulation des classes CSS, offrant des méthodes intuitives pour ajouter, supprimer, vérifier et basculer des classes sur des éléments.
.addClass(): Ajoute une ou plusieurs classes CSS aux éléments sélectionnés..hasClass(): Vérifie si au moins un des éléments sélectionnés possède une classe spécifique. Retournetrueoufalse..removeClass(): Supprime une ou plusieurs classes des éléments sélectionnés..toggleClass(): Bascule l'état d'une ou plusieurs classes (ajoute si absente, supprime si présente).
Détail des méthodes de manipulation de classes:
.addClass(): Peut prendre un nom de classe unique, plusieurs noms de classes séparés par des espaces, ou être chaîné.$("sélecteur").addClass("maClasse");$("sélecteur").addClass("maClasse autreClasse");
.hasClass(): Utile pour la logique conditionnelle dans les scripts.$("sélecteur").hasClass("nomClasse");
.removeClass(): Identique à.addClass()pour les arguments (une ou plusieurs classes).$("sélecteur").removeClass("maClasse");$("sélecteur").removeClass("maClasse autreClasse");
.toggleClass(): Idéal pour les interactions utilisateur comme l'ouverture/fermteure de menus ou l'activation de thèmes.$("sélecteur").toggleClass("maClasse");$("sélecteur").toggleClass("maClasse autreClasse");
Exemple pratique de gestion des classes:
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Exemple jQuery Classes</title>
<script src="JS/jquery-3.2.1.js"></script>
<style>
.styleRouge {
width: 300px;
height: 60px;
background-color: #e74c3c; /* Rouge */
margin-bottom: 10px;
color: white;
display: flex;
align-items: center;
justify-content: center;
}
.styleVert {
border: 2px solid #27ae60; /* Vert */
font-weight: bold;
box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
}
.element-simple {
padding: 10px;
background-color: #ecf0f1;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="element-simple">Div à manipuler</div>
<p class="info-paragraphe">Paragraphe d'information.</p>
<button id="btnAjouter">Ajouter Classes</button>
<button id="btnVerifier">Vérifier Classe 'styleRouge'</button>
<button id="btnSupprimer">Supprimer Classes</button>
<button id="btnBasculer">Basculer Classes</button>
<script>
$(document).ready(function() {
// Cible le div pour toutes les manipulations de classes
var divCible = $("div.element-simple");
// 1. Ajouter des classes
$("#btnAjouter").on("click", function() {
divCible.addClass("styleRouge styleVert");
console.log("Classes ajoutées au div: styleRouge, styleVert");
});
// 2. Vérifier une classe
$("#btnVerifier").on("click", function() {
var aLaClasseRouge = divCible.hasClass("styleRouge");
var aLaClasseBleue = divCible.hasClass("styleBleue"); // Classe inexistante pour le test
console.log("Le div a la classe 'styleRouge' ? " + aLaClasseRouge); // Attendu: true après ajout
console.log("Le div a la classe 'styleBleue' ? " + aLaClasseBleue); // Attendu: false
});
// 3. Supprimer des classes
$("#btnSupprimer").on("click", function() {
divCible.removeClass("styleVert styleRouge");
console.log("Classes supprimées du div: styleVert, styleRouge");
});
// 4. Basculer des classes
$("#btnBasculer").on("click", function() {
divCible.toggleClass("styleRouge styleVert");
console.log("Classes basculées sur le div: styleRouge, styleVert");
});
});
</script>
</body>
</html>
Méthodes de positionnement et de dimensionnement avec jQuery
jQuery fournit également des méthodes pratiques pour interroger et modifier les dimensions (largeur, hauteur) et les positions (par rapport au document ou au parent) des éléments.
1. Méthodes .width() et .height()
Ces méthodes permettent d'obtenir ou de définir la largeur et la hauteur calculées d'un élément. Elles renvoient ou définissent la largeur/hauteur du contenu de l'élément (sans les marges, bordures ou paddings, sauf si la propriété box-sizing est définie à border-box via CSS).
- Obtenir la valeur: Appelez sans argument, ex:
$("sélecteur").width(); - Définir la valeur: Passez un argument (nombre ou chaîne CSS), ex:
$("sélecteur").width(150);ou$("sélecteur").height("10em");
2. Méthodes .offset() et .position()
Ces méthodes retournent un objet contenant les propriétés top et left, exprimées en pixels.
.offset(): Retourne la position de l'élément par rapport au coin supérieur gauche du document (qui est souvent la fenêtre du navigateur si le document n'a pas de barres de défilement). C'est une position absolue par rapport àdocument.documentElement..position(): Retourne la position de l'élément par rapport à son parent positionné le plus proche (un parent ayant une propriété CSSpositionautre questatic). Si aucun parent positionné n'est trouvé, la position est relative au document.
Exemple de positionnement et dimensionnement:
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>jQuery Dimensions & Positions</title>
<script src="JS/jquery-3.2.1.js"></script>
<style>
.conteneur-parent {
width: 300px;
height: 300px;
background-color: #9b59b6; /* Violet */
position: relative; /* Indispensable pour que .position() soit relatif à ce parent */
margin: 50px; /* Ajoute une marge pour mieux observer l'offset */
padding: 20px;
}
.element-enfant {
width: 80px;
height: 80px;
background-color: #1abc9c; /* Vert-bleu */
left: 30px;
top: 40px;
position: absolute; /* Positionné absolument par rapport au parent positionné */
}
</style>
</head>
<body>
<script>
$(document).ready(function() {
var elementEnfant = $(".element-enfant");
// --- 1. Dimensionnement (width et height) ---
console.log("--- Dimensions initiales de l'enfant ---");
console.log("Largeur: " + elementEnfant.width() + "px");
console.log("Hauteur: " + elementEnfant.height() + "px");
// Définir de nouvelles dimensions
elementEnfant.width(120);
elementEnfant.height(120);
console.log("--- Dimensions de l'enfant après modification ---");
console.log("Nouvelle largeur: " + elementEnfant.width() + "px");
console.log("Nouvelle hauteur: " + elementEnfant.height() + "px");
// --- 2. Positionnement (offset et position) ---
console.log("--- Positions de l'enfant ---");
// Position par rapport au document (coin supérieur gauche de la page/fenêtre)
var offsetPosition = elementEnfant.offset();
console.log("Position (offset) par rapport au document:");
console.log(" Top: " + offsetPosition.top + "px");
console.log(" Left: " + offsetPosition.left + "px");
// Position par rapport au parent positionné (.conteneur-parent)
var relativePosition = elementEnfant.position();
console.log("Position (position) par rapport au parent positionné:");
console.log(" Top: " + relativePosition.top + "px");
console.log(" Left: " + relativePosition.left + "px");
});
</script>
<div class="conteneur-parent">
<div class="element-enfant"></div>
</div>
</body>
</html>