Manipuler les styles CSS des éléments
Introduction
jQuery dispose de plusieurs méthodes qui permettent de manipuler le CSS des éléments composants une page web.
La méthode css()
JQuery permet d’utiliser une méthode nommée css() de deux manières différentes : soit en tant que “getter” pour obtenir la valeur liée à une propriété CSS d’un élément, soit en tant que “setter” pour définir une propriété CSS ainsi que sa valeur pour un élément sélectionné.
Afin d’obtenir la valeur d’une propriété CSS liée à la sélection, il faut spécifier ladite propriété recherchée en argument.
Pour définir la valeur d’une propriété pour une sélection, il faut passer deux arguments à la méthode css() : les attributs CSS souhaités ainsi que leurs valeurs.
Enfin, pour définir plusieurs attributs et valeurs à une sélection d'éléments en une seule fois, il est possible de passer un objet javascript en argument en respectant la syntaxe suivante : css({"prop1: value", "prop2: value"}).
<!-- Code HTML initial -->
<body>
<button id="button1">Changer la police</button>
<p>Famille de polices actuellement utilisée : <span id="font"></span></p>
<div>
<p>Un premier paragraphe</p>
<p>Un deuxième paragraphe</p>
</div>
</body>
$(document).ready(function(){
// Récupération de la police d’écriture
let font = $("body").css("font-family");
// Écriture du nom de la police dans la balise possédant
// l'identifiant “font”
$("#font").text(font);
$("#button1").click(function () {
//Lors du clic sur le bouton change la police d'écriture
$("body").css("font-family", "Nunito, Futura, Verdana");
//Met à jour la valeur du span
font = $("body").css("font-family");
$("#font").text(font);
});
});
<!-- Code HTML après un clic sur le bouton -->
<body style="font-family: Nunito, Futura, Verdana;">
<button id="button1">Changer la police</button>
<p>Famille de polices actuellement utilisée : <span id="font">Nunito, Futura, Verdana</span></p>
<div>
<p>Un premier paragraphe</p>
<p>Un deuxième paragraphe</p>
</div>
</body>
Les méthodes liées aux dimensions des éléments
JQuery fournit également une série de méthodes qui permettent d'obtenir ou de définir la largeur et la hauteur d'un élément.
La méthode width() permet d'obtenir la largeur du premier élément de la sélection, ou de définir cette largeur pour tous les éléments de la sélection en passant la largeur (en pixel) comme argument sans préciser l’unité.
La méthode innerWidth() permet d'obtenir la largeur de l’élément et le padding du premier élément de la sélection, ou de définir la largeur des éléments de la sélection. Cette largeur est définie sans unité, mais toujours exprimée en pixel.
La méthode outerWidth() permet d'obtenir la largeur, le padding et la bordure du premier élément de la sélection, ou de définir cette largeur en pixel pour tous les éléments de la sélection en la passant en argument.
<!-- Code HTML initial -->
<body>
<div>
<p>Un premier paragraphe</p>
<p>Un deuxième paragraphe</p>
</div>
<p id="text">Troisième paragraphe hors div</p>
<p>Largeur avec css() : <span id="css"></span></p>
<p>Largeur avec width() : <span id="width"></span></p>
</body>
// Code jQuery s'exécutant dès que le DOM est prêt
$(document).ready(function(){
// récupération de la taille de l'élément "div" avec la méthode css()
let largeurCss = $("div").css("width");
// récupération de la taille de l'élément "div" avec la méthode width()
let largeurWidth = $("div").width();
// affichage de la variable "largeurCss" dans l'élément possédant
// l'identifiant "css"
$("#css").text(largeurCss);
// affichage de la variable "largeurWidth" dans l'élément possédant
// l'identifiant "width"
$("#width").text(largeurWidth);
});
Après exécution :
<!-- Code HTML après exécution du jQuery -->
<body>
<div>
<p>Un premier paragraphe</p>
<p>Un deuxième paragraphe</p>
</div>
<p id="text">Troisième paragraphe hors div</p>
<p>Largeur avec css() : <span id="css">1359px</span></p>
<p>Largeur avec width() : <span id="width">1359</span></p>
</body>
Besoin d'aide ?
Rejoignez notre communauté officielle et ne restez plus seul à bloquer sur un problème !
