Modifying Classes

Modifying or Changing classes means you can add or remove classes from scripts. You also add CSS effects on that class.

<!DOCTYPE html>
<html>
  <head>
    <title>Modifying Classes</title>
    <style>
      .container {
        border: 1px solid black;
        padding: 5px;
      }

      .bg-warning {
        background-color: yellow;
      }

      .bg-danger {
        background-color: tomato;
      }

      .bg-info {
        background-color: skyblue;
      }
    </style>
  </head>

  <body>
    <div class="container bg-warning" id="box">This is Box</div>
    <br />

    <button type="button" onclick="danger()">Danger</button>
    <button type="button" onclick="warning()">Warning</button>
    <button type="button" onclick="info()">Info</button>

    <script>
      const box = document.getElementById("box");
      function danger() {
        box.classList.remove("bg-warning");
        box.classList.remove("bg-info");
        box.classList.add("bg-danger");
      }
      function warning() {
        box.classList.remove("bg-danger");
        box.classList.remove("bg-info");
        box.classList.add("bg-warning");
      }
      function info() {
        box.classList.remove("bg-danger");
        box.classList.remove("bg-warning");
        box.classList.add("bg-info");
      }
    </script>
  </body>
</html>

Output :

After Click On Danger Button.

After Click On Warning Button.

After Click On Info Button.

Explanation :

In the above example, classlist is a object, we can add or remove classes from the script using .classList method.

In line number 36, 37, 41, 42, 46 and 47, we can used box.classList.remove(" "); it is used to remove the classes such as, bg-warning , bg-info , bg-danger from your script.

In line number 38, 43 and 48, we can used box.classList.add(" "); it is used to add the bg-danger , bg-warning and bg-infofrom your script.

This example after optimizing each functions and remove classList.

Example :

<!DOCTYPE html>
<html>
  <head>
    <title>ClassName</title>
    <style>
      .container {
        border: 1px solid black;
        padding: 5px;
      }

      .bg-warning {
        background-color: yellow;
      }

      .bg-danger {
        background-color: tomato;
      }

      .bg-info {
        background-color: skyblue;
      }
    </style>
  </head>
  <body>
    <div class="container bg-warning" id="box">This is Box</div>
    <br />
    <button type="button" onclick="danger()">Danger</button>
    <button type="button" onclick="warning()">Warning</button>
    <button type="button" onclick="info()">Info</button>

    <script>
      const box = document.getElementById("box");

      function danger() {
        box.className = "container bg-danger";
      }
      function warning() {
        box.className = "container bg-warning";
      }
      function info() {
        box.className = "container bg-info";
      }
    </script>
  </body>
</html>

Output :

After Click On Danger Button.

After Click On Warning Button.

After Click On Info Button.

This example after converting all functions into one function.

<!DOCTYPE html>
<html>
  <head>
    <title>Modifying Classes</title>
    <style>
      .container {
        border: 1px solid black;
        padding: 5px;
      }

      .bg-warning {
        background-color: yellow;
      }

      .bg-danger {
        background-color: tomato;
      }

      .bg-info {
        background-color: skyblue;
      }

      .bg-pink {
        background-color: pink;
      }

      .bg-primary {
        background-color: blueviolet;
      }
    </style>
  </head>

  <body>
    <div class="container bg-warning" id="box">This is Box.</div>
    <br />
    <button type="button" onclick="ChangeClassName('bg-danger')">Danger</button>
    <button type="button" onclick="ChangeClassName('bg-warning')">
      Warning
    </button>
    <button type="button" onclick="ChangeClassName('bg-info')">Info</button>
    <button type="button" onclick="ChangeClassName('bg-pink')">Pink</button>
    <button type="button" onclick="ChangeClassName('bg-primary')">
      Primary
    </button>

    <script>
      function ChangeClassName(bgName) {
        const box = document.getElementById("box");
        box.className = `container ${bgName}`;
      }
    </script>
  </body>
</html>

Output :

After Click On Danger Button.

After Click On Warning Button.

After Click On Info Button.

After Click On Pink Button.

After Click On Primary Button.

Dark Mode and Light Mode

<!DOCTYPE html>
<html>
  <head>
    <title>Dark Light Mode</title>
  </head>
  <style>
    .container {
      padding: 5px;
      margin: 10px;
      border-radius: 25px;
    }

    .container-light {
      background-color: bisque;
      padding: 15px;
      border: 1px solid brown;
      color: brown;
    }

    .container-dark {
      background-color: dimgray;
      padding: 15px;
      border: 1px solid black;
      color: white;
    }
  </style>

  <body>
    <div class="container container-light" id="box">This is Box.</div>
    <br />

    <button type="button" onclick="changeTheme('dark')">Dark Mode</button>
    <button type="button" onclick="changeTheme('light')">Light Mode</button>

    <script>
      function changeTheme(themeName) {
        const box = document.getElementById("box");
        box.className = `container container-${themeName}`;
      }
    </script>
  </body>
</html>

Output :

After Click On Dark Mode Button.

After Click On Light Mode Button.

Dark Mode and Light Mode​

Dark Mode and Light Mode