Courses/IBM-JavaScript-Essentials/08-DOM-Manipulation/clas-list.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>classList Example</title>
    <style>
      .highlight {
        color: red;
        font-weight: bold;
      }
      .italic {
        font-style: italic;
      }
      .underline {
        text-decoration: underline;
      }
      .strike {
        text-decoration: line-through;
      }
    </style>
  </head>
  <body>
    <p id="myParagraph" class="highlight">This is a paragraph.</p>
    <button onclick="performClassListOperations()">Perform Operations</button>

    <script>
      function performClassListOperations() {
        // Getting the Paragraph Element
        const paragraph = document.getElementById("myParagraph");

        // Adds the class "italic" to the paragraph element's class list.
        paragraph.classList.add("italic");

        // Removes the class "highlight" from the paragraph element's class list.
        paragraph.classList.remove("highlight");

        // Toggles the class "underline" on the paragraph element. In this case, it explicitly adds the class "underline" because the second parameter is true.
        paragraph.classList.toggle("underline", true);

        // Checking if a class exists
        const hasItalicClass = paragraph.classList.contains("italic");
        console.log(`Has italic class: ${hasItalicClass}`);

        // Replacing a class after a delay (for demonstration)
        setTimeout(() => {
          paragraph.classList.replace("underline", "strike");

          // Accessing classes as a string
          const classString = paragraph.classList.toString();
          console.log(`Current classes: ${classString}`);
        }, 2000); // Delay for 2 seconds
      }
    </script>
  </body>
</html>