How to change an element's class using JavaScript?-JS Tutorial-php.cn

How to change an element's class using JavaScript?

PHPz

Release： 2023-08-30 14:29:04

forward

1292 people have browsed it

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

The className attribute is used to change the class of an element. Here we will see two examples -

How to change the class of an element using the className attribute.
How to switch between old and new courses.

Use the className attribute to change the class of an element

In this example, we will use the className attribute to change the class of the element. Let's say we have a div with class oldStyle -

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

Copy after login

We will use the className attribute to set the above oldStyle class to a new class, i.e. newStyle -

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

Copy after login

We achieved the above goal by calling demoFunction() by clicking the following button -

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

Copy after login

Example

Let’s see the complete example -

<!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>

Copy after login

Switch between old and new classes

Example

We can also create a button that works in both ways, that is, toggle. Clicking the button again switches it back -

<!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>

Copy after login

The above is the detailed content of How to change an element's class using JavaScript?. For more information, please follow other related articles on the PHP Chinese website!