How to get all CSS classes of an element?

Asked
Active3 hr before
Viewed126 times

7 Answers

classeselement
90%

Stack Overflow en español, Meta Stack Overflow , GitLab launches Collective on Stack Overflow , Stack Overflow Public questions & answers

No need to use jQuery for it:

var classList = this.className.split(' ')

If you for some reason want to do it from a jQuery object, those two solutions work, too:

var classList = $(this)[0].className.split(' ')
var classList = $(this).prop('className').split(' ')

Of course you could switch to overkill development mode and write a jQuery plugin for it:

$.fn.allTheClasses = function() {
   return this[0].className.split(' ');
}
load more v
88%

  Alternatively, you can use jQuery’s .prop() method.,This post will discuss how to get the CSS class of an element using JavaScript and jQuery.,That’s all about getting the CSS class of an element using JavaScript and jQuery.,In plain JavaScript, you can use the className property to get the value of the class attribute of the specified element.

1. Using jQuery

You can get the value of class attribute using jQuery’s .attr() method.

class

1. Using jQuery

You can get the value of class attribute using jQuery’s .attr() method.

.attr()
load more v
72%

You can simply use the attr() method to get the class list i.e. list of all the classes that are assigned to an element using jQuery. The class names are space separated.,Here are some more FAQ related to this topic:,Is this website helpful to you? Please give us a like, or share your feedback to help us improve. Connect with us on Facebook and Twitter for the latest updates.,Let's try out the following example to understand how it basically works:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Get Class List for Element</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        // Get class list string
        var classList = $("#myDiv").attr("class");
        
        // Creating class array by splitting class list string
        var classArr = classList.split(/\s+/);
        
        $.each(classArr, function(index, value){
            $("body").append("<p>" + index + ": " + value + "</p>");
        });
    });
});
</script>
</head>
<body>
    <div id="myDiv" class="foo bar bazz">
        <p>This is a paragraph inside DIV element</p>
    </div>
    <button type="button">Get Div Class List</button>
</body>
</html>
load more v
65%

I have an element with multiple classes and I'd like to get its css classes in an array. How would I do this? Something like this:, javascript - Can jQuery get all CSS styles associated with an element? , css - How to use JavaScript to get the opacity of an element? , javascript - JS removes all classes from the element

I have an element with multiple classes and I'd like to get its css classes in an array. How would I do this? Something like this:

var classList = $(this).allTheClasses();
75%

To get a complete list of classes of an element, you just need to access the className property:,The className is the property of an element. It returns a space-separated list of CSS classes of the element:,To completely overwrite all the classes of an element, you use a simple assignment operator. For example:,To set a class to an element, you use the following code:

The className is the property of an element. It returns a space-separated list of CSS classes of the element:

.wp - block - code {
      border: 0;
      padding: 0;
   }

   .wp - block - code > div {
      overflow: auto;
   }

   .shcb - language {
      border: 0;
      clip: rect(1 px, 1 px, 1 px, 1 px); -
      webkit - clip - path: inset(50 % );
      clip - path: inset(50 % );
      height: 1 px;
      margin: -1 px;
      overflow: hidden;
      padding: 0;
      position: absolute;
      width: 1 px;
      word - wrap: normal;
      word - break: normal;
   }

   .hljs {
      box - sizing: border - box;
   }

   .hljs.shcb - code - table {
      display: table;
      width: 100 % ;
   }

   .hljs.shcb - code - table > .shcb - loc {
      color: inherit;
      display: table - row;
      width: 100 % ;
   }

   .hljs.shcb - code - table.shcb - loc > span {
      display: table - cell;
   }

   .wp - block - code code.hljs: not(.shcb - wrap - lines) {
      white - space: pre;
   }

   .wp - block - code code.hljs.shcb - wrap - lines {
      white - space: pre - wrap;
   }

   .hljs.shcb - line - numbers {
      border - spacing: 0;
      counter - reset: line;
   }

   .hljs.shcb - line - numbers > .shcb - loc {
      counter - increment: line;
   }

   .hljs.shcb - line - numbers.shcb - loc > span {
      padding - left: 0.75 em;
   }

   .hljs.shcb - line - numbers.shcb - loc::before {
      border - right: 1 px solid #ddd;
      content: counter(line);
      display: table - cell;
      padding: 0 0.75 em;
      text - align: right; -
      webkit - user - select: none; -
      moz - user - select: none; -
      ms - user - select: none;
      user - select: none;
      white - space: nowrap;
      width: 1 % ;
   }
element.className
Code language: CSS(css)
load more v
40%

Approach 1: Use the document.defaultView.getComputedStyle() method to get all the cascading styles associated with that particular element. After that, append the style to a string one by one by traversing the object.,How to get all CSS styles associated with an element using jQuery ?,Given an HTML document containing some CSS properties and the task is to get all the CSS styles of a particular element by using jQuery. The two approaches are as follows.,How to get all CSS styles that are applied directly to an element using JavaScript ?

22%

The CSS class selector matches elements based on the contents of their class attribute.,Note that this is equivalent to the following attribute selector:,© 2005-2021 Mozilla and individual contributors. Content is available under these licenses.,FeedbackSend FeedbackContribute to MDNReport a content issue 🌐Report a platform issue 🌐

/* All elements with class="spacious" */
.spacious {
  margin: 2em;
}

/* All <li> elements with class="spacious" */
li.spacious {
  margin: 2em;
}

/* All <li> elements with a class list that includes both "spacious" and "elegant" */
/* For example, class="elegant retro spacious" */
li.spacious.elegant {
  margin: 2em;
}
load more v

Other "classes-element" queries related to "How to get all CSS classes of an element?"