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:  jQuery Multidimensional Array name selector

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:  Get Selected Radio Button value using jQuery

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:  What is jquery Hasclass? - jQuery Check if Element has Class

Related FAQ

Here are some more FAQ related to this Article:

  1. Read Also:  How to select only one checkbox at a time in jquery example?
  2. Read Also:  Laravel 6 return view jQuery ajax request example
  3. Read Also:  Ajax Autocomplete Live Search Suggestion using PHP MySQL
  4. Read Also:  Best Most Popular JavaScript Frameworks comparison
  5. Read Also:  Vuejs Multiple Items Select Box Example
  6. Read Also:  javascript object Remove key value Examples
  7. Read Also:  jQuery Convert string to integer Example
  8. Read Also:  jQuery AJAX Pagination in PHP Without Page Refresh Example
  9. Read Also:  Simple Jquery ajax request example with demo
  10. Read Also:  Bootstrap Toggle switch Update Database field using Ajax
CLOSEX