jQuery.css() : manipuler des éléments de style CSS

La méthode jQuery.css() vous permet de modifier des propriétés de style CSS en passant directement par JavaScript, sans avoir à faire appel à un accès DOM complexe ou à des sélecteurs CSS détaillés. Grâce à cette manipulation simplifiée, vous pouvez donc modifier l’apparence de votre site Web de façon rapide et précise.

Méthode jQuery.css() : de quoi s’agit-il ?

La méthode jQuery.css() permet d’obtenir ou encore de modifier la valeur d’une propriété CSS particulière. Vous pouvez aussi l’utiliser pour les évènements avec la méthode jQuery.on() ou pour les animations avec la méthode jQuery.animate(). Vous souhaitez manipuler les propriétés de plusieurs éléments d’un même type ? Alors vous pouvez combiner la méthode jQuery.css() avec la fonction de boucle jQuery.each(). Si vous utilisez jQuery pour WordPress, sachez que l’intégration de la méthode jQuery.css() est très simple et qu’aucune dépendance supplémentaire n’est nécessaire.

Conseil

L’hébergement Web proposé par IONOS vous offre des solutions évolutives, celles-ci vous permettant de sélectionner vos ressources de manière à ce qu’elles répondent à vos besoins. L’infrastructure est stable ; vous pouvez donc être sûr que votre site Web est en ligne en permanence, et que n’importe quel visiteur peut y accéder. Vous avez également la possibilité de modifier votre offre d’hébergement de façon flexible, afin de calquer son évolution sur celle de votre entreprise.

À quoi ressemble la syntaxe de la méthode jQuery.css() ?

La syntaxe de la méthode jQuery.css() prend la forme qui suit :

$(selector).css(property, value);
jQuery

Le paramètre property indique la propriété CSS dont il convient de récupérer la valeur, tandis que value correspond à la nouvelle valeur exprimée sous forme numérique ou à l’aide d’une chaîne de caractères.

Vous avez aussi la possibilité de renseigner ou de manipuler simultanément plusieurs propriétés CSS, et ce, en transmettant un objet renfermant des paires propriété-valeur.

$(selector).css({property1: value1, property2: value2, ...});
jQuery

Si vous en ressentez le besoin, notre tutoriel jQuery vous permet de dépoussiérer vos connaissances sur jQuery.

Conseil

L’API IONOS est très pratique si vous souhaitez automatiser des tâches et des processus. Elle vous permet notamment de gérer les services IONOS à l’aide d’un programme, mais aussi de créer et de configurer des ressources sans qu’aucune intervention manuelle ne soit nécessaire. En plus de gagner du temps, vous réduisez également le risque d’erreurs humaines.

Exemple d’application de la méthode jQuery.css()

L’exemple ci-dessous illustre l’utilisation concrète de la méthode jQuery.css() :

<!DOCTYPE html>
<html>
<head>
    <title>jQuery.css() example</title>
    <style>
        .myElement {
            width: 200px;
            height: 100px;
            background-color: blue;
            color: white;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div class="myElement">This is an example text</div>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $(".myElement").css("background-color", "red");
            $(".myElement").css("color", "green");
            var fontSize = $(".myElement").css("font-size");
            console.log("Font-Size:", fontSize);
        });
    </script>
</body>
</html>
jQuery

Cet exemple comporte un élément HTML de la classe myElement ; à l’origine, son fond est bleu, son texte est blanc et la taille de la police s’établit à 20 pixels. La méthode jQuery.css() change nous permet de choisir du rouge pour la couleur de fond de l’élément ($(".myElement").css("background-color", "red");) et du vert pour la couleur du texte ($(".myElement").css("color", "green");). Nous utilisons également la méthode $(".myElement").css("font-size") de manière à récupérer la bonne taille de police de l’élément et à faire apparaître cette dernière sur la console.

Vous pouvez ainsi manipuler un grand nombre de propriétés de style CSS, et ainsi modifier de façon dynamique toute l’apparence de votre site.

Conseil

Avec Deploy Now, la solution proposée par IONOS pour les sites Web statiques et les applications à page unique, profitez d’une interface simple d’utilisation ainsi que d’un déploiement automatique. Grâce au paramétrage rapide, configurez facilement votre application en évitant toutes les étapes de configuration complexes.

Cet article vous a-t-il été utile ?