HTML5<\/a>. In this version of HTML, each element already has a property classList that contains a list of all class names already assigned to the element. This classList property further supports methods like add(), remove(), contains() and toggle() to add, remove, check and toggle class names. Let us learn more about them.<\/p>\n\n\n\nYou can easily select an element using document.getElementById() function. We will use it to select the element and use its classList() property.<\/p>\n\n\n\n
Here is the code to select our div and add class ‘my_div’ to it.<\/p>\n\n\n\n
document.getElementById(\"div_id\").classList.add('my_div');<\/pre>\n\n\n\nOnce you run the above code, your div will have two classes div_class as well as my_div. If your div already has my_div class present, then it will not give any error or warning. Every element can have only unique class names so it will not once again the my_div class name either.<\/p>\n\n\n\n
Here is how to remove the class ‘my_div’ from it.<\/p>\n\n\n\n
document.getElementById(\"div_id\").classList.remove('my_div');<\/pre>\n\n\n\nOnce you run the above code, your div will only have class div_class and not my_div in it. If my_div class is not present and you run the above code, it will not give any error.<\/p>\n\n\n\n
If you want to check if an element contains a specific class name or not, then you can call contains() function.<\/p>\n\n\n\n
document.getElementById(\"div_id\").classList.contains('my_div');<\/pre>\n\n\n\nThe above code will return True or False depending on whether the class name is present or not. <\/p>\n\n\n\n
You can also toggle a class name for a given element using toggle() function.<\/p>\n\n\n\n
document.getElementById(\"div_id\").classList.toggle('my_div');<\/pre>\n\n\n\nThe above code will first check if the class my_div is present or not, and if present, it will remove the class. If it is not present, then it will add the class. In both cases, the other class names are left unchanged. This is generally useful to toggle the class name of an element on calling an event such as button click. Based on the toggling of class name of an element, you can change CSS style of the element.<\/p>\n\n\n\n
<script type=\"text\/javascript\">
function changeClass(){
document.getElementById(\"div_id\").classList.toggle('my_div');
}
<\/script>
...
<button onClick=\"changeClass()\">My Button<\/button>
<div id='div_id' class='div_class'>hello world<\/div><\/pre>\n\n\n\nIn this example, we have a button a div on web page. We have added a click event handler for the button. In this event handler, we basically toggle the class name of div.<\/p>\n\n\n\n