How to add class to element in Javascript
By FoxLearn 1/14/2025 3:02:22 AM 155
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');.
- 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
- How to copy text to clipboard in Javascript
- How to Pass string parameter in an onclick function
- How to convert voice to text in Javascript
Categories
Popular Posts
Portal HTML Bootstrap
11/14/2024
Gentella Admin Template
11/14/2024
Material Lite Admin Template
11/14/2024
Carpatin Admin Dashboard Template
11/17/2024