La méthode jQuery.addClass() constitue une solution précise et simple d’uti­li­sa­tion si vous souhaitez ajouter des classes à des éléments, de manière à contrôler l’apparence et le com­por­te­ment de votre site Web. Découvrez avec nous la structure et le fonc­tion­ne­ment de la méthode .addClass().

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

L’uti­li­sa­tion de la méthode .addClass() vous permet de modifier de façon dynamique l’apparence de votre site Web. Vous pouvez par exemple choisir les styles, concevoir des ani­ma­tions ou réagir à toute in­te­rac­tion des uti­li­sa­teurs en ajoutant les classes né­ces­saires aux éléments HTML concernés. Cette méthode ne sert néanmoins pas à supprimer les classes exis­tantes. Pour utiliser cette fonction, il convient de faire appel à la méthode jQuery.re­mo­ve­Class(). Une fois l’ajout effectué, les règles de style CSS prévues pour la classe sont ap­pli­quées aux éléments sé­lec­tion­nés, de manière à parvenir au com­por­te­ment visuel souhaité. N’hésitez pas également à utiliser jQuery pour WordPress pour per­son­na­li­ser la mise en page et les effets dans votre système de gestion de contenu (ou CMS, pour Content Ma­na­ge­ment System).

Conseil

Avec l’hé­ber­ge­ment Web de IONOS, vous profitez notamment d’un cer­ti­fi­cat SSL Wildcard gratuit et d’une option de sau­ve­garde au­to­ma­tique. Découvrez nos dif­fé­rentes solutions d’hé­ber­ge­ment.

À quoi res­semblent la syntaxe et les pa­ra­mètres de la méthode jQuery.addClass() ?

La fonction jQuery.addClass() peut accepter deux pa­ra­mètres. De manière générale, la syntaxe se présente comme suit :

$(selector).addClass(classname,function(index,currentclass))
jQuery
  • classname : nom de la classe ou des classes à ajouter, avec une virgule sé­pa­ra­trice ;
  • function(index,cur­rent­class) : fonction de rappel fa­cul­ta­tive, appelée pour chaque élément sé­lec­tionné ;
  • index : index de l’élément dans la liste de tous éléments sé­lec­tion­nés ;
  • cur­rent­class : classe de l’élément.

La fonction de rappel vous permet en plus de procéder à des mo­di­fi­ca­tions ou d’intégrer une logique au niveau de chaque élément au moment de l’ajout des classes. Par exemple, vous pouvez vérifier la valeur actuelle de la classe et ajouter d’autres classes en fonction de la première.

Vous commencez seulement à tra­vail­ler avec jQuery ? Nous vous con­seil­lons de consulter notre article faisant office de tutoriel jQuery, dans lequel vous trouverez toutes les in­for­ma­tions de base sur la bi­blio­thèque jQuery.

Conseil

L’API IONOS vous permet de con­fi­gu­rer avec rapidité et facilité tous vos produits hébergés par IONOS. Avec la clé d’accès aux API IONOS, vous pouvez gérer vous-même vos domaines, vos pa­ra­mètres DNS et vos cer­ti­fi­cats SSL. Pour de plus amples in­for­ma­tions, n’hésitez pas à consulter la do­cu­men­ta­tion dis­po­nible sur la page d’in­for­ma­tion consacrée à l’API du dé­ve­lop­peur IONOS.

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

Pour vous montrer comment utiliser la fonction .addClass(), dans l’exemple ci-dessous, nous allons ajouter « .green » à l’élément p, pour changer à la fois la couleur et la taille de police du pa­ra­graphe. Cette mo­di­fi­ca­tion est dé­clen­chée à l’aide d’un évènement de clic sur le bouton. Il existe d’autres méthodes, telles que jQuery.find() ou jQuery.ajax(), que vous pouvez fa­ci­le­ment utiliser avec la fonction .addClass().

<!DOCTYPE html>
<html>
    
<head>
        <style>
                .blue {
                        color: blue;
                        font-weight: bold;
                }
    
                .green {
                        font-size: 24px;
                        color: green;
                }
        </style>
    
        <!-- Import jQuery CDN library -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
                $(document).ready(function () {
                        $("button").click(function () {
                                $("p").addClass("green");
                        });
                });
        </script>
</head>
    
<body style="text-align: center;">
        <h1>
                This is a jQuery.addClass() example.
        </h1>
    
        <p class="blue">
                jQuery add class to element demo
        </p>
    
        <button>Click!</button>
</body>
    
</html>
html

Dans la fenêtre du na­vi­ga­teur, vous pouvez voir que la couleur et la taille de l’élément p ont été modifiées au moment du clic sur le bouton.

Avant :

Image: Affichage avant l’appel de la fonction .addClass()
Apparence avant l’ajout de la classe

Après :

Image: Affichage après l’appel de la fonction .addClass()
Effet de la fonction .addClass dans le na­vi­ga­teur
Conseil

Créez votre propre projet en ligne avec Deploy Now, la solution proposée par IONOS. Avec l’ins­tal­la­tion rapide et la re­con­nais­sance au­to­ma­tique du framework, quelques étapes suffisent pour mettre sur pied votre site Internet. En plus de votre adhésion (Deploy Now Mem­ber­ship), vous pouvez réserver des res­sources sup­plé­men­taires, puis résilier celles-ci le mois suivant. Avec Deploy Now, IONOS propose une solution optimisée sur le plan de l’orien­ta­tion client.

Aller au menu principal