La méthode jQuery.css() vous permet de modifier des pro­prié­tés de style CSS en passant di­rec­te­ment par Ja­vaS­cript, sans avoir à faire appel à un accès DOM complexe ou à des sé­lec­teurs CSS détaillés. Grâce à cette ma­ni­pu­la­tion sim­pli­fié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 par­ti­cu­lière. Vous pouvez aussi l’utiliser pour les évè­ne­ments avec la méthode jQuery.on() ou pour les ani­ma­tions avec la méthode jQuery.animate(). Vous souhaitez manipuler les pro­prié­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’in­té­gra­tion de la méthode jQuery.css() est très simple et qu’aucune dé­pen­dance sup­plé­men­taire n’est né­ces­saire.

Conseil

L’hé­ber­ge­ment Web proposé par IONOS vous offre des solutions évo­lu­tives, celles-ci vous per­met­tant de sé­lec­tion­ner vos res­sources de manière à ce qu’elles répondent à vos besoins. L’in­fras­truc­ture est stable ; vous pouvez donc être sûr que votre site Web est en ligne en per­ma­nence, et que n’importe quel visiteur peut y accéder. Vous avez également la pos­si­bi­lité de modifier votre offre d’hé­ber­ge­ment de façon flexible, afin de calquer son évolution sur celle de votre en­tre­prise.

À 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 cor­res­pond à la nouvelle valeur exprimée sous forme numérique ou à l’aide d’une chaîne de ca­rac­tères.

Vous avez aussi la pos­si­bi­lité de ren­seig­ner ou de manipuler si­mul­ta­né­ment plusieurs pro­prié­tés CSS, et ce, en trans­met­tant un objet ren­fer­mant 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é­pous­sié­rer vos con­nais­sances sur jQuery.

Conseil

L’API IONOS est très pratique si vous souhaitez au­to­ma­ti­ser 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 con­fi­gu­rer des res­sources sans qu’aucune in­ter­ven­tion manuelle ne soit né­ces­saire. En plus de gagner du temps, vous réduisez également le risque d’erreurs humaines.

Exemple d’ap­pli­ca­tion de la méthode jQuery.css()

L’exemple ci-dessous illustre l’uti­li­sa­tion 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 ap­pa­raître cette dernière sur la console.

Vous pouvez ainsi manipuler un grand nombre de pro­prié­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 ap­pli­ca­tions à page unique, profitez d’une interface simple d’uti­li­sa­tion ainsi que d’un dé­ploie­ment au­to­ma­tique. Grâce au pa­ra­mé­trage rapide, con­fi­gu­rez fa­ci­le­ment votre ap­pli­ca­tion en évitant toutes les étapes de con­fi­gu­ra­tion complexes.

Aller au menu principal