To change an HTML element’s class attribute value using JavaScript, you can use either the className or the classList property provided for every single HTML element.
This tutorial will help you learn how to use both methods, starting from the className property.
Change the class value using className property
The className property allows you to fetch an HTML element’s class attribute value as a string.
Here’s an example of how className property works:
<body>
<p id="header" class="red">Hello World! This is a paragraph element.</p>
<script>
const paragraph = document.getElementById("header");
console.log(paragraph.className); // "red"
</script>
</body>
Now that you know how the className property works, you can change the class value of an element by assigning a new value to the property as follows:
<body>
<p id="header" class="red">Hello World! This is a paragraph element.</p>
<script>
const paragraph = document.getElementById("header");
paragraph.className = "yellow blue";
console.log(paragraph.className); // "yellow blue"
</script>
</body>
Using the className property allows you to change the class attribute value, but you need to add the previous value manually if you want to keep it.
For example, to keep the class "red" from the <p> element above and adds a new class named "font-large", you need to assign both classes as follows:
const paragraph = document.getElementById("header");
paragraph.className = "red font-large";
Even though the "red" class is already present, you still need to assign it again, creating a small redundancy in your code.
To avoid this kind of redundancy, you can use the classList property instead.
Change the class value using classList property
The classList property is a read-only property of an HTML element that returns the class attribute value as an array. The property also provides several methods for you to manipulate the class attribute value.
For example, to add new class names without removing the current value, you can use the classList.add() method.
Using the same <p> element example above, here’s how to add the "font-large" class without removing the "red" element:
<body>
<p id="header" class="red">Hello World! This is a paragraph element.</p>
<script>
const paragraph = document.getElementById("header");
paragraph.classList.add("font-large");
console.log(paragraph.classList); // ["red", "font-large"]
</script>
</body>
When you want to remove an element’s class attribute value, you can use the remove() method, which allows you to remove() class names as a comma-delimited string:
<body>
<p id="header" class="red">Hello World! This is a paragraph element.</p>
<script>
const paragraph = document.getElementById("header");
paragraph.classList.add("font-large");
paragraph.classList.remove("red");
console.log(paragraph.classList); // ["font-large"]
</script>
</body>
For more information on classList property you can read the following post:
JavaScript classList() property and methods explained
And that’s how you can change the class attribute value using the className or classList property methods.
