Add, remove, and toggle classes in HTML elements
To add, remove, or update the class(es) attached to HTML elements, you may use jQuery and JavaScript.
The jQuery has addClass, removeClass, and hasClass methods that can be used for adding, removing, or updating the classes.
Similarly, you may use the className and classList attributes of JavaScript, if you do not want to use the jQuery.
See the section below for demos by using jQuery and JavaScript.
A demo of using jQuery addClass method
In this example, a div element with simple text is created without assigning a class initially. As you click the button, the addClass method executes and adds a CSS class to that div element. See the demo and code below:
The complete code including jQuery, CSS, and markup:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
$(document).ready(function(){
$("#btn_cls").click(function(){
$("#class_demo").addClass("addcls");
});
});
</script>
<style>
.addcls
{
background: #232F36;
font-size:16px;
width:300px;
height:50px;
border-radius:10px;
color:#fff;
}
</style>
</head>
<body>
<div id="class_demo">A demo of adding class by jQuery</div>
<p>
<button id="btn_cls">Click here to addClass</button>
</p>
</body>
</html>
A demo of jQuery removeClass method
In this example, the jQuery removeClass method is used for removing a class assigned to the div element initially. Click the button to delete the class:
The code:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
$(document).ready(function(){
$("#btn_cls").click(function(){
$("#class_demo").removeClass("divclass");
});
});
</script>
<style>
.divclass
{
background: #800040;
font-size:16px;
width:300px;
height:50px;
border-radius:10px;
color:#fff;
}
</style>
</head>
<body>
<div id="class_demo" class="divclass">A demo of removing class by jQuery</div>
<p>
<button id="btn_cls">Click here to remove class</button>
</p>
</body>
</html>
An example of adding a class by using the JavaScript className attribute
In this example, the class is added to the button by using the className attribute of the JavaScript. The button classes are added from the Bootstrap framework, so the reference is included in the <head> section.
You can see, multiple classes are added by using the className attribute. You may add one more class separated by space:
The Code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script type="text/javascript">
function changeClass()
{
document.getElementById("class_demo").className = "btn btn-danger btn-lg";
}
</script>
</head>
<body>
<h3>Click on the button to add classes by JavaScript</h3>
<button id="class_demo" onclick="changeClass()">Add Class by JavaScript</button>
</body>
</html>
A demo of removing class by using the className JS attribute
In this example, three Bootstrap classes are applied to the button initially i.e. btn, btn-success, and btn-block. As you click the button, the btn-block class is removed by using the JavaScript classList.remove.
That means the button size will be normal after removing the btn-block class. Have a look:
The code for removing a class:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script type="text/javascript">
function removeClass()
{
document.getElementById('class_demo').classList.remove('btn-block');
}
</script>
</head>
<body>
<h3>Click on the button to remove btn-block class by JavaScript</h3>
<button class="btn btn-success btn-block" id="class_demo" onclick="removeClass()">Remove Class by JavaScript</button>
</body>
</html>
Using toggle attribute of JavaScript to add/remove a class
You may also use the toggle attribute to add/remove a class in an HTML element. If the class is already assigned, it will be removed, and vice versa.
The code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script type="text/javascript">
function removeClass()
{
document.getElementById('class_demo').classList.toggle('btn-lg');
}
</script>
</head>
<body>
<h3>Click on the button to add/remove btn-lg class by JavaScript</h3>
<button class="btn btn-info btn-lg" id="class_demo" onclick="removeClass()">Add/Remove Class by JavaScript toggle</button>
</body>
</html>
A demo of jQuery toggle method
If you are using jQuery, then $.toggle method can be used to add or remove a class in an element. Just like JS, if a class is already assigned it will be removed and vice versa.
The code:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
$(document).ready(function(){
$("#btn_cls").click(function(){
$("#class_demo").toggleClass("divclass");
});
});
</script>
<style>
.divclass
{
background: #800040;
font-size:16px;
width:300px;
height:50px;
border-radius:10px;
color:#fff;
}
</style>
</head>
<body>
<div id="class_demo" class="divclass">A demo of jQuery toggleClass</div>
<p>
<button id="btn_cls">Add/Remove class</button>
</p>
</body>
</html>