Before you know how to manipulate HTML element class using Javascript, let us understand what this class is all about.
The class attribute of an HTML element is used to add CSS effect to the element such as changing background color and font color e.t.c
In this post, am going to show you how to add a class to html element using JavaScript. When we talk of adding class to an HTML element via JavaScript, you can either use the .className property or the .add() method to add a class name to html element.
The .className property can be used to set the class name of an element and also to return the value of the class attribute of an element.
In cases where the element already has an existing class, you can add another classes using .className property but a space must be added before the new class name e.g " newClassName" otherwise the existing class will be overwritten by the new class.
You can also add multiple class names to html element using the .className property but all class names must be separated with space e.g "class A class B class C class D" e.t.c
.className has two syntax. One is to set the class name while the other is to return the class name.
To set the class name
element.className = "class";
To return the class name
element.className;
If a class is already declared for an element, and we need to add a new class name to the same element then it should be declared by inserting a space before writing the new class name otherwise, it will overwrite the existing class name.
Take for instance you have a style with a class name "btn1" for Button and this class only add background color to the button, now you have another class "btn2" which adds border to Button. To combine the two classes, see below
<style>
.btn1{
background-color:crimson;
color:#fff;
}
.btn2{
border-style: solid;
border-color:gray;
border-width:1px;
}
</style>
Now at initial stage, you have this
<button id = "btnlogin" class = "btn1">Login</button>
Now for you to add the second class known as "btn2" using Javascript, use the following
document.getElementById("btnlogin").className = " btn2";
In the above code, we have inserted a space before btn2 to prevent overwritten btn1.
Now, let us demonstrate a typical example of how we can add or change HTML element class using Javascript.
You have to click the given HTML button "Login" to see the effect.
<!DOCTYPE html>
<html>
<head>
<title>
add class name using JavaScript
</title>
.<style>
.btn1{
background-color:crimson;
color:#fff;
}
.btn2{
border-style: solid;
border-color:gray;
border-width:1px;
}
</style>
<script>
function test() {
var btn = document.getElementById("btnlogin");
btn.className = "btn1";
}
</script>
</head>
<body>
<h1>
Adding class to HTML element using Javascript
</h1>
<button id = "btnlogin" onclick="test()" >Login</button>
</body>
</html>
Output
Before button click
After button clicked
In the first example, we just added "btn1" class to "btnlogin" button. What about if this button already has "btn1" as class upon creation and you insist on adding"btn2" class for border purpose?
You can achieve this through example below.
<!DOCTYPE html>
<html>
<head>
<title>
add class name to html element with existing class using JavaScript
</title>
.<style>
.btn1{
background-color:crimson;
color:#fff;
}
.btn2{
border-style: solid;
border-color:gray;
border-width:1px;
}
</style>
<script>
function test() {
var btn = document.getElementById("btnlogin");
btn.className = " btn2"; //new added class
}
</script>
</head>
<body>
<h1>
Adding class to HTML element with existing class using Javascript
</h1>
<button id = "btnlogin" class="btn1" onclick="test()" >Login</button>
</body>
</html>
Now in the second example above, we just added "btn2" class to the btnlogin existing class. Hence, it now has its source as
<button id = "btnlogin" class="btn1 btn2" onclick="test()" >Login</button>
And the button will have both background color and border unlike the first example that has just background color.
In this example, we are going to change the "btnlogin" class from "btn1" to "btn2". Hence, the button will no longer have background color but border.
<!DOCTYPE html>
<html>
<head>
<title>
Changing class name using JavaScript
</title>
.<style>
.btn1{
background-color:crimson;
color:#fff;
}
.btn2{
border-style: solid;
border-color:gray;
border-width:1px;
}
</style>
<script>
function test() {
var btn = document.getElementById("btnlogin");
btn.className = "btn2";
}
</script>
</head>
<body>
<h1>
Change class of HTML element using Javascript
</h1>
<button id = "btnlogin" class="btn1" onclick="test()" >Login</button>
</body>
</html>
In this example, we are getting the name of the class by using the .className property.
Click the Login button to see the effect.
<!DOCTYPE html>
<html>
<head>
<title>
Get class name using JavaScript
</title>
.<style>
.btn1{
background-color:crimson;
color:#fff;
}
.btn2{
border-style: solid;
border-color:gray;
border-width:1px;
}
</style>
<script>
function test() {
var btn = document.getElementById("btnlogin");
alert (btn.className);
}
</script>
</head>
<body>
<h1>
Getting class name of HTML element using Javascript
</h1>
<button id = "btnlogin" class="btn1" onclick="test()" >Login</button>
</body>
</html>
Finally, we have come to the end of .className, now let us see how we can still perform the above demonstration using add() method.
How to add a class to an element using JavaScript
Using add() method
element.classList.add("class name");
Example
<!DOCTYPE html>
<html>
<head>
<title>
add class name using add() method in JavaScript
</title>
.<style>
.btn1{
background-color:crimson;
color:#fff;
}
.btn2{
border-style: solid;
border-color:gray;
border-width:1px;
}
</style>
<script>
function test() {
var btn = document.getElementById("btnlogin");
btn.classList.add("btn1");
}
</script>
</head>
<body>
<h1>
Adding class to HTML element using add() method in Javascript
</h1>
<button id = "btnlogin" onclick="test()" >Login</button>
</body>
</html>