Manipuler les styles CSS des éléments

45 min Niveau 5

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>

Se connecter pour voir la suite

Besoin d'aide ?

Rejoignez notre communauté officielle et ne restez plus seul à bloquer sur un problème !