How to add, remove and toggle class by JavaScript and jQuery?
Adding, removing and toggle class in HTML elements
To add, remove or update the class(es) attached to HTML elements, you may use the 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:
See online demo and code
The complete code including jQuery, CSS, and markup:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
<!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> |
You can learn more about addClass method of jQuery here.
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:
See online demo and code
The code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
<!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> |
A demo of adding class by using 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. Yoy may add one more classes separated by space as shown in the demo and code below:
See online demo and code
The Code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<!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:
See online demo and code
The code for removing a class:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<!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. See this demo:
See online demo and code
The code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<!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 the 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.
See online demo and code
The code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
<!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> |
Also see: jQuery removeClass, jQuery toggle