How to get the class name using Jquery Example with demo?

Sometimes We need to get class name jquery. I don’t know which CSS available or exists class is applied to Html each div or any tag element. In this best Example I will learn jquery-attr, addClass, removeClass, toggleClass, Css with how to get the class name using Jquery. If data html element more check contain multiple classes it will return each class name.

Jquery attr(‘class’)

Jquery .attr() methods data returns the class attribute value. and then that i am going to split the data return value and get the respected class names.

Syntax

$("#yourid").attr('class');

Get class name using Jquery

index.html

<!DOCTYPE html>
<html>
   <head>
   <title>jQuery get class of element with multiple classes</title>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  
      <script>
         $(document).ready(function(){  
          $("#khazana").click(function(){
           $("#pakainfo").attr('class').split(' ').map(function(clssName){     
            $("#comments").append(clssName +" ");
            alert(clssName)
           })
          });  
           });  
          
      </script>   
   </head>
   <style>
      div{  
      padding:12px;
      margin:12px; 
      height:110px;
      width:110px;   
      display:inline-block;
      background:#3d3d3d;    
      }
   </style>
   <body>
      <h1>HMTL Get Class Name Using Jquery</h1>
      <div class="krutidev seo khazana 4cgandhi" id="pakainfo">krutidev seo khazana 4cgandhi</div>
      <p id="comments"></p>
      <p><input type="button" value="Get Class Name" id="khazana"></p>
   </body>
</html>

jQuery – Get and Set CSS Classes

  • addClass() – included one or more classes to the selected data elements
  • removeClass() – deletes one or more classes from the selected data elements
  • toggleClass() – Switch between adding/removing classes from the selected data elements
  • Pure css() – Sets or returns the style attribute

jQuery addClass() Method

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("h1, h2, p").addClass("pink");
    $("div").addClass("important");
  });
});
</script>
<style>
.important {
  font-weight: bold;
  font-size: xx-large;
}

.pink {
  color: pink;
}
</style>
</head>
<body>

<h1>Seo khazana 1</h1>
<h2>Seo khazana 2</h2>

<p>This is a 4cgandhi.</p>
<p>This is another 4cgandhi.</p>

<div>This is some important text!</div><br>

<button>Add classes to elements</button>

</body>
</html>

jQuery removeClass() Method

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("h1, h2, p").removeClass("pink");
  });
});
</script>
<style>
.pink {
  color: pink;
}
</style>
</head>
<body>

<h1 class="pink">Seo khazana 1</h1>
<h2 class="pink">Seo khazana 2</h2>

<p class="pink">This is a 4cgandhi.</p>
<p>This is another 4cgandhi.</p>

<button>Remove class from elements</button>

</body>
</html>

jQuery toggleClass() Method

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("h1, h2, p").toggleClass("pink");
  });
});
</script>
<style>
.pink {
  color: pink;
}
</style>
</head>
<body>

<h1>Seo khazana 1</h1>
<h2>Seo khazana 2</h2>

<p>This is a 4cgandhi.</p>
<p>This is another 4cgandhi.</p>

<button>Toggle class</button>

</body>
</html>

I hope you get an idea about get class name jquery.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.


Related FAQ

Here are some more FAQ related to this Article:

  1.   How to add Bootstrap Tooltip Plugin Example
  2.   Remove HTML Table Row and Column using jQuery
  3.   vue-scrollto smooth scroll vuejs example
  4.   jQuery Validate CKEditor value is blank or not
  5.   JavaScript GROUP BY Function with Example
  6.   jQuery Functions Not Working after PostBack in Asp.Net
  7.   Send HTML Form Data as JSON via Ajax
  8.   PHP AJAX Live Search Box Autocomplete Using MySQL Database
  9.   Jquery .next() and .prev() functions example
  10.   jQuery Multidimensional Array name selector
Tags:, , , , ,