How to add class to element in Javascript

By Tan Lee Published on Dec 18, 2024 235

In JavaScript, you can add a class to an HTML element using the classList property and the add() method.

This method adds the specified class to the element without affecting any existing classes.

document.getElementById("myElement").classList.add("myClass")

This code selects the element with the ID "myElement" and adds the class "myClass" to its classList.

How to add a class to a html element in Javascript?

For example, Add a class to an element by its id:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JavaScript Add Class Example</title>
</head>
<body>
  <div id="myElement">Javascript add class to element</div>
  <button onclick="addClassToElement()">Add Class</button>
  <script>
    function addClassToElement() {
      // Get the element by its ID
      var element = document.getElementById('myElement');
      // Add the 'new-class' to the element's class list
      element.classList.add('new-class');
    }
  </script>
</body>
</html>

For example, Add a class to an element by its class name or other selector

// Add class to all elements with a certain class name
document.querySelectorAll('.some-class').forEach(function(element) {
  element.classList.add('new-class'); // js add class
});

classList.add('className') adds a new class without removing any existing classes.

If the class is already present on the element, it won't be added again. You can also add multiple classes at once: element.classList.add('class1', 'class2');.

How to add class to element in Javascript

By Tan Lee Published on Dec 18, 2024 235

How to add a class to a html element in Javascript?

Related

Categories

Popular Posts

Entity Framework Code First vs Database First vs Model First Approach

RuangAdmin Template

11 Things You Didn't Know About Cloudflare

AdminKit Bootstrap 5 HTML5 UI Kits Template

Modular Admin Template