How TO - Add a Class
Learn how to add a class name to an element with JavaScript.
Click the button to add a class to me!
Add Class
Step 1) Add HTML:
Add a class name to the div element with id="myDIV" (in this example we use a button to add the class).
Example
<button onclick="myFunction()">Try it</button>
<div id="myDIV">
This is a DIV element.
</div>
Step 2) Add CSS:
Style the specified class name:
Example
.mystyle {
width: 100%;
padding:
25px;
background-color: coral;
color: white;
font-size: 25px;
}
Step 3) Add JavaScript:
Get the <div> element with id="myDIV" and add the "mystyle" class to it:
Example
function myFunction() {
var element = document.getElementById("myDIV");
element.classList.add("mystyle");
}
Try it Yourself »
Cross-browser solution
Note: The classList property is not supported in Internet Explorer 9. The following code will work in all browsers:
Example
function myFunction() {
var element, name, arr;
element = document.getElementById("myDIV");
name = "mystyle";
arr = element.className.split(" ");
if (arr.indexOf(name)
== -1) {
element.className += "
" + name;
}
}
Try it Yourself »
Tip: Also see How To Toggle A Class.
Tip: Also see How To Remove A Class.
Tip: Learn more about the classList property in our JavaScript Reference.
Tip: Learn more about the className property in our JavaScript Reference.
