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.

Read Also:  Dynamic Autocomplete Textbox in jQuery Ajax

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
Read Also:  How to add bootstrap accordion with plus minus Toggle Icons?

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.

Read Also:  Autocomplete Textbox using jQuery, PHP and MySQLi

Related FAQ

Here are some more FAQ related to this Article:

  1. Read Also:  Simple Jquery ajax request example with demo
  2. Read Also:  Add Edit Delete Table Row Example using JQuery
  3. Read Also:  Simple Model Popup Box using HTML CSS and JavaScript
  4. Read Also:  Laravel 6 return view jQuery ajax request example
  5. Read Also:  vue-scrollto smooth scroll vuejs example
  6. Read Also:  jQuery Ajax Login Script using PHP MySQLi
  7. Read Also:  AJAX Pagination with Laravel Example From Scratch
  8. Read Also:  How to add Bootstrap Tooltip Plugin Example
  9. Read Also:  Star Rating System using jQuery
  10. Read Also:  Server-side processing Laravel DataTables