Comment changer la classe d'un élément en utilisant JavaScript ?-js tutoriel-php.cn

Comment changer la classe d'un élément en utilisant JavaScript ?

PHPz

Libérer： 2023-08-30 14:29:04

avant

1296 Les gens l'ont consulté

L'attribut

如何使用 JavaScript 更改元素的类？

className est utilisé pour changer la classe d'un élément. Ici, nous verrons deux exemples -

Comment changer la classe d'un élément à l'aide de l'attribut className.
Comment basculer entre les anciens et les nouveaux cours.

Changez la classe d'un élément à l'aide de l'attribut className

Dans cet exemple, nous allons changer la classe d'un élément en utilisant l'attribut className. Disons que nous avons un div avec la classe oldStyle -

<div id="mydiv" class="oldStyle">
   <p>The div...</p>
</div>

Copier après la connexion

Nous utiliserons l'attribut className pour définir la classe oldStyle ci-dessus sur une nouvelle classe, c'est-à-dire newStyle -

function demoFunction() {
   document.getElementById("mydiv").className = "newStyle";
}

Copier après la connexion

Nous avons réalisé ce qui précède en appelant demoFunction() en cliquant sur le bouton suivant -

<p>Click the below button to change the class</p>
<button onclick="demoFunction()">Change Class</button>

Copier après la connexion

Exemple

Voyons l'exemple complet -

<!DOCTYPE html>
<html>
<style>
   .oldStyle {
      background-color: yellow;
      padding: 5px;
      border: 2px solid orange;
      font-size: 15px;
   }
   .newStyle {
      background-color: green;
      text-align: center;
      font-size: 25px;
      padding: 7px;
   }
</style>
<body>
   <h1>Changing the class</h1>
   <p>Click the below button to change the class</p>
   <button onclick="demoFunction()">Change Class</button>
   <div id="mydiv" class="oldStyle">
      <p>The div...</p>
   </div>
   <script>
      function demoFunction() {
         document.getElementById("mydiv").className = "newStyle";
      }
   </script>
</body>
</html>

Copier après la connexion

Basculez entre les anciennes et les nouvelles catégories

Exemple

Nous pouvons également créer un bouton qui fonctionne dans les deux sens, c'est-à-dire basculer. Cliquer à nouveau sur le bouton le ramène -

<!DOCTYPE html>
<html>
<style>
   .oldStyle {
      background-color: yellow;
      padding: 5px;
      border: 2px solid orange;
      font-size: 15px;
   }
   .newStyle {
      background-color: green;
      text-align: center;
      font-size: 25px;
      padding: 7px;
   }
</style>
<body>
   <h1>Toggle the class</h1>
   <p>Click the below button to toggle the classes</p>
   <button onclick="demoFunction()">Toggle Class</button>
   <div id="mydiv" class="oldStyle">
      <p>The div...</p>
   </div>
   <script>
      function demoFunction() {
         const element = document.getElementById("mydiv");
         if (element.className == "oldStyle") {
            element.className = "newStyle";
         } else {
            element.className = "oldStyle";
         }
      }
   </script>
</body>
</html>

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!