How to add class to element in Javascript
By Tan Lee Published on Dec 18, 2024 417
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 use sweetalert2
- How to Pass string parameter in an onclick function
- How to format number with commas and decimal in Javascript
- What does 'use strict;' means in Javascript
- How to detect if caps lock is pressed in Javascript
- How to create a Custom Event in Javascript
- How to Check if an Object Has a Property Properly in JavaScript
- How to convert an Uint8Array to string in Javascript
Categories
Popular Posts
Structured Data using FoxLearn.JsonLd
Jun 20, 2025
Implement security headers for an ASP.NET Core
Jun 24, 2025
10 Common Mistakes ASP.NET Developers Should Avoid
Dec 16, 2024
Star Admin Dashboard Template
Nov 14, 2024
Monster Admin Template
Nov 14, 2024