In your web pages, you may add or remove CSS classes from the DOM elements on the fly.
No jQuery or some other library is required but this can be done easily by raw JavaScript.
For example:
Where:
- divtst specifies the element where you want to add a new class name.
- This is followed by the classList property.
- Then add method is used and the desired class name is provided in the parenthesis.
The examples below show how to specify elements and add CSS classes in different elements.
An example of adding a CSS class in a div element
In the first example of explaining how to add a class, I am using a div element.
The div tag simply displays plain text without any style.
As you click on the button “Add class”, the tstClass that contains a few CSS properties will be applied to that div element.
See the example and output below:
The code:
<!DOCTYPE html> <html> <head> </head> <body> <style> .tstClass { background: linear-gradient(to right, #FF0000,#008000,#FFFF00); height: 80px; width:25%; color:#ffffff; padding: 15px; font-family:verdana; font-size:17px; } </style> </head> <body> <p>A Demo of JavaScript Add Class</p> <button onclick="addClsFunc()">Add class</button> <div id="divDemo"> Click on above button and see how class is added! </div> <script> function addClsFunc() { var divtst = document.getElementById("divDemo"); divtst.classList.add("tstClass"); } </script> </body> </html>
Note JS for this example:
<script> function addClsFunc() { var divtst = document.getElementById("divDemo"); divtst.classList.add("tstClass"); } </script>
An example of adding a class in HTML table
By using the JavaScript classList property’s Add method, you may add the CSS class to different elements.
In the following example, a raw table without any CSS is created as the web page loads.
Again, as you click the button, the CSS style class will be added to the table by using JavaScript:
The JavaScript used for adding class to the table element:
<script> function addClsFunc() { var tbltst = document.getElementById("tblAddCls"); tbltst.classList.add("tblAddClsDemo"); } </script>
Following is the CSS class:
<style> /*Using CSS for table*/ .tblAddClsDemo { border-collapse: collapse; border: 1px solid #486171; } .tblAddClsDemo th{ border: 2px dashed #486171; color: #293741; padding:8px; } .tblAddClsDemo td{ border: 1px solid #000000; color: #004B97; padding:13px; width:100px; } </style>
Complete code:
<!DOCTYPE html> <html> <head> <style> /*Using CSS for table*/ .tblAddClsDemo { border-collapse: collapse; border: 1px solid #486171; } .tblAddClsDemo th{ border: 2px dashed #486171; color: #293741; padding:8px; } .tblAddClsDemo td{ border: 1px solid #000000; color: #004B97; padding:13px; width:100px; } </style> </head> <body> <p>Add Class in Table Example</p> <table id="tblAddCls"> <tr> <th>Product ID</th> <th>Product Name</th> <th>Product Quality</th> <th>Product Quantity</th> </tr> <tr> <td>1</td> <td>Wheat</td> <td>Good</td> <td>200 Bags</td> </tr> <tr> <td>2</td> <td>Rice</td> <td>Good</td> <td>250 Bags</td> <tr> <td>3</td> <td>Sugar</td> <td>Good</td> <td>200 Bags</td> </tr> </table> <button onclick="addClsFunc()">Add class to table</button> <div id="divDemo"> Click on above button and see how class is added to the table! <script> function addClsFunc() { var tbltst = document.getElementById("tblAddCls"); tbltst.classList.add("tblAddClsDemo"); } </script> </body> </html>
Does classList add method remove the existing class?
In order to test if classList removes an existing class before adding a new class, I have created a div element with the basic style
. The initial class applied to the div tag is “cls1” which sets the following properties to the div element:
Text size, color
As you click the button, the “cls2” class is added to the div element by classList add method. This class does not contain size and color properties.
Rather it contains a few other properties like padding, border, etc.
See if it removes the text size and color applied by cls1 class or not:
The code:
<body> <style> .cls1 { font-size:20px; color:#FF8040; } .cls2 { background: linear-gradient(to right, #CE0000,#004A00,#FFFF40); height: 100px; width:35%; padding: 20px; font-family:verdana; } </style> </head> <body> <p>A Demo of JavaScript Add Class</p> <button onclick="addClsFunc()">Add class</button> <div id="divDemo" class="cls1"> Add a class to a div with existing class. </div> <script> function addClsFunc() { var divtst = document.getElementById("divDemo"); divtst.classList.add("cls2"); } </script> </body>
You can see that the properties of cls1 class remain in tact while properties of the cls2 class are also added.