Last Updated on February 14, 2021 by Roshan Parihar
In this tutorial, learn how to get class name of div element using jQuery. The short answer is: use the jQuery attr() function or prop() method and pass ‘class’ as the argument.
You can find the class name on the button click for the selected element. Let’s find out how to get the class name of the div element with the examples given below.
How to Get Class Name of Div Element Using jQuery attr() Funtion
If you want to get the class name on button click, you have to use the jQuery attr() method with ‘class‘ as its argument. You can print the resulted class in the output or use the alert box to display the class as given below:
Example
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<script> $(document).ready(function(){ $('button').click(function(){ var myclass = $( "div" ).attr("class"); alert(myclass); }); }); </script> <style> .mystylediv{ color: red; background: #ccc; border: 1px solid orange; padding: 10px; width: 150px; text-align: center; } </style> <div class="mystylediv">This is a div element.</div> <button type="button">Click to Get Class Name</button> |
Output
The above example contains the div element and the button element. When you click the button given above, it finds the class of the div element and displays it in an alert box.
Find Class Using jQuery prop() Function
In addition to the above example, you can also use the jQuery prop() method to find the class of the selected element. It required the same ‘class‘ as the argument to get the class of the selected element as given below:
Example
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<script> $(document).ready(function(){ $('button').click(function(){ var myparaclass = $( "p" ).prop("class"); alert(myparaclass); }); }); </script> <style> .mypara{ color: orange; } </style> <p class="mypara">This is a paragraph element.</p> <button type="button">Click to Find Class Name</button> |
Output
This is a paragraph element.
The above example contains the paragraph and the button element. When you click the button given above, it finds the class name and displays it in the alert box.
There are two methods of jQuery to get the class name. You can both of jQuery attr() and prop() method to find the class name from the required element.
You May Also Like to Read
I hope you like this post about getting the class name using jQuery.