Comment changer la catégorie d’élément avec JavaScript

L’attribut class peut être utilisé en JavaScript (via HTML DOM) pour modifier les éléments HTML avec une catégorie définie. La catégorie spécifiée peut être changé de plusieurs manières. Voici les méthodes les plus communes pour changer les catégories dans des éléments DOM:

La méthode .className

La propriété .className définit ou renvoie la valeur de l’attribut class de l’élément spécifié.

Pour renvoyer la propriété. className, utiliser la syntaxe suivante:

HTMLElementObject.className

To set the .className property use the following syntax:

HTMLElementObject.className = class

Exemple

<!DOCTYPE html>
<html>
  <head>
    <style>
      .style {
        width: 150px;
        height: 50px;
        background-color: #1c87c9;
        text-align: center;
        font-size: 20px;
        color: #e6ebef;
        margin-bottom: 10px;
        padding: 5px;
      }
    </style>
  </head>
  <body>
    <p>Cliquez sur le bouton pour définir une catégorie pour div.</p>
    <div id="Div">
      Je suis un élément DIV
    </div>
    <button onclick="myFunction()">Click</button>
    <script>
      function myFunction() {
        document.getElementById("Div").className = "style";
      }
    </script>
  </body>
</html>

Essayez-vous-même!

La méthode .classList

.classList est une propriété à lecture seule qui renvoie le class name(s) d’un élément comme un objet de DOMTokenList. Cette méthode comprend aussi d’autres méthodes. Voyons les si-dessous:

add (class1, class2, ...)

Cette méthode ajoute une valeur de catégorie (class value) à la liste des valeurs d’éléments. Si la catégorie déjà existe, cela n’ajoutera pas la catégorie encore.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <style>
      .class1 {
        width: 200px;
        height: 50px;
        background-color: #1c87c9;
        color: #e6ebef;
        font-size: 25px;
        padding: 5px;
      }
    </style>
  </head>
  <body>
    <p>Cliquez sur le bouton pour ajouter une "class1" catégorie à Div.</p>
    <button onclick="myFunction()">Click</button>
    <p><strong>Note:</strong> La propriété classList n’est pas supporté en Internet Explorer 9 et les versions antérieures.</p>
    <div id="myDiv">
      Je suis un élément DIV.
    </div>
    <script>
      function myFunction() {
        document.getElementById("myDiv").classList.add("class1");
      }
    </script>
  </body>
</html>

Essayez-vous-même!

remove (class1, class2, ...)

Cette méthode retire une valeur de catégorie de la liste des valeurs d’éléments. Si la catégorie n’existe pas, cela ne lancera pas une erreur.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <style>
      .class1 {
        width: 300px;
        height: 50px;
        background-color: #1c87c9;
        color: #e6ebef;
        font-size: 25px;
        text-align: center;
        padding: 5px;
      }
    </style>
  </head>
  <body>
    <p>Cliquez sur le bouton pour retirer la "class1" catégorie de Div. <button onclick="myFunction()">Click</button></p>

    <p><strong>Note:</strong> la propriété classList n’est pas supporté en Internet Explorer 9 et les versions antérieures.</p>
    <div id="myDiv" class="class1">
      Je suis un élément Div.
    </div>
    <script>
      function myFunction() {
        document.getElementById("myDiv").classList.remove("class1");
      }
    </script>
  </body>
</html>

Essayez-vous-même!

item (index)

Cette méthode renvoie une valeur de catégorie via index nombre d’un élément. Index commence à 0 et renvoie null si index est hors de portée.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <style>
      .Class1 {
        width: 500px;
        height: 30px;
      }
      .Class2 {
        background-color: lightblue;
      }
      .Class3 {
        text-align: center;
        font-size: 25px;
        color: black;
        margin-bottom: 10px;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <p>Cliquez sur le bouton pour afficher le class name pour la première catégorie(index 0) de div.</p>
    <div id="myDiv" class="Class1 Class2 Class3">
      Je suis un élément avec trois catégories.
    </div>
    <button onclick="myFunction()">Click</button>
    <p><strong>Note:</strong> La propriété classList n’est pas supporté en Internet Explorer 9 et les versions antérieures.</p>
    <p id="demo"></p>
    <script>
      function myFunction() {
        var x = document.getElementById("myDiv").classList.item(0);
        document.getElementById("demo").innerHTML = x;
      }
    </script>
  </body>
</html>

Essayez-vous-même!

toggle(class, true|false)

Cette méthode bascule l’existence de la valeur de catégorie the dans la liste des valeurs d’éléments. Quand on a un paramètre seulement, et la catégorie existe, cela efface la catégorie spécifiée d’un élément et renvoie false. Et si la catégorie n’existe pas, cela est ajouté à l’élément et renvoie true.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <style>
      .Class1 {
        width: 150px;
        height: 50px;
        background-color: #1c87c9;
        color: #e6ebef;
        font-size: 25px;
        padding: 5px;
      }
      .Class2 {
        width: 300px;
        height: 100px;
        background-color: #8ebf42;
        text-align: center;
        font-size: 25px;
        color: #eee;
        margin-bottom: 10px;
      }
    </style>
  </head>
  <body>
    <p>Cliquez sur le bouton pour basculer entre deux catégorie.</p>
    <button onclick="myFunction()">Click</button>
    <p><strong>Note:</strong> La propriété classList n’est pas supporté en Internet Explorer 9 et versions antérieures.</p>
    <div id="myDiv" class="Class1">
      Je suis un élément Div.
    </div>
    <script>
      function myFunction() {
        document.getElementById("myDiv").classList.toggle("Class2");
      }
    </script>
  </body>
</html>

Essayez-vous-même!

contains (class)

Cette méthode vérifie si un élément a un class name spécifié. Les valeurs possibles: true; false.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <style>
      .Class1 {
        width: 500px;
        height: 50px;
        border: 1px solid black;
      }
      .Class2 {
        background-color: #eee;
        padding: 25px;
      }
      .Class3 {
        text-align: center;
        font-size: 25px;
        color: #1c87c9;
        margin-bottom: 10px;
      }
    </style>
  </head>
  <body>
    <p>Cliquez sur le bouton pour découvrir si l’élément Div a une catégorie de "Class1".</p>
    <div id="myDiv" class="Class1 Class2 Class3">
      Je suis un élément Div
    </div>
    <button onclick="myFunction()">Click</button>
    <p><strong>Note:</strong> La propriété classList n’est pas supporté en Internet Explorer 9 et les versions plus antérieures.</p>
    <p id="demo"></p>
    <script>
      function myFunction() {
        var x = document.getElementById("myDiv").classList.contains("Class1");
        document.getElementById("demo").innerHTML = x;
      }
    </script>
  </body>
</html>

Essayez-vous-même!

replace(oldClass, newClass)

Cette méthode remplace une catégorie qui existe avec une nouvelle catégorie.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <style>
      .oldClass {
        width: 150px;
        height: 50px;
        background-color: #1c87c9;
        color: #e6ebef;
        font-size: 25px;
        padding: 5px;
      }
      .newClass {
        width: 300px;
        height: 100px;
        background-color: #8ebf42;
        text-align: center;
        font-size: 25px;
        color: #eee;
        margin-bottom: 10px;
      }
    </style>
  </head>
  <body>
    <p>Cliquez sur le bouton pour remplacer la catégorie.</p>
    <button onclick="myFunction()">Click</button>
    <p><strong>Note:</strong> La propriété classList n’est pas supporté en Internet Explorer 9 et les versions plus antérieures.</p>
    <div id="myDiv" class="oldClass">
      Je suis un élément Div.
    </div>
    <script>
      function myFunction() {
        var x = document.getElementById("myDiv");
        x.classList.replace("oldClass", "newClass");
      }
    </script>
  </body>
</html>

Essayez-vous-même!