What is the hasClass function with plain JavaScript

Question

How do you do jQuery   s hasClass with plain ol    JavaScript  For example    lt body class  foo thatClass bar  gt    What   s the JavaScript way to ask if  lt body gt  has thatClass

User · Answer

x000D   x000D     1  Use if for see that classes  x000D   x000D  if  document querySelector   section-name   classList contains  section-filter      x000D    alert  Grid section    x000D       code    x000D    x000D   lt  --2  Add a class in the  html -- gt  x000D   x000D   lt div class  section-name section-filter  gt     lt  div gt  x000D   x000D   x000D

User · Answer

Element matches   Instead of   element  hasClass  example   in jQuery  you can use element matches   example   in plain JavaScript  if  element matches   example           Element has example class        View Browser Compatibility

User · Answer

Here is the simplest way Only with javascript  var allElements   document querySelectorAll       for  var i   0  i  lt  allElements length  i          if  allElements i  hasAttribute  quot class quot                 console log allElements i  className            if  allElements i  className includes  quot  the  class  quot                     console log  quot I see the class quot

User · Answer

This  hasClass  function works in IE8   FireFox and Chrome  hasClass   function el  cls        var regexp   new RegExp     s       cls       s               target    typeof el className      undefined     window event srcElement   el      return target className match regexp       Updated Jan 2021  A better way  hasClass    el  cls    gt          el classList  includes cls     cls without dot

User · Answer

The most effective one liner that    returns a boolean  as opposed to Orbling s answer  Does not return a false positive when searching for thisClass on an element that has class  thisClass-suffix   is compatible with every browser down to at least IE6     function hasClass  target  className         return new RegExp     s       className       s      test target className

User · Answer

I use a simple minimal solution  one line  cross browser  and works with legacy browsers as well     bmyClass  test document body className     notice the  b command for whole word  myClass    This method is great because does not require polyfills and if you use them for classList it s much better in terms of performance  At least for me   Update  I made a tiny polyfill that s an all round solution I use now   function hasClass element testClass     if   classList  in element    return element classList contains testClass     else   return new Regexp testClass  exec element className        this is better      else   return el className indexOf testClass     -1       this is faster but requires indexOf   polyfill   return false      For the other class manipulation  see the complete file here

User · Answer

Well all of the above answers are pretty good but here is a small simple function I whipped up  It works pretty well    function hasClass el  cn       var classes   el classList      for var j   0  j  lt  classes length  j             if classes j     cn               return true

User · Answer

hasClass function   HTMLElement prototype hasClass   function cls        var i      var classes   this className split           for i   0  i  lt  classes length  i              if classes i     cls                return true                      return false       addClass function   HTMLElement prototype addClass   function add        if   this hasClass add            this className    this className         add  trim               removeClass function   HTMLElement prototype removeClass   function remove        var newClassName           var i      var classes   this className replace   s 2   g       split           for i   0  i  lt  classes length  i              if classes i      remove                newClassName    classes i                             this className   newClassName trim

User · Answer

The attribute that stores the classes in use is className   So you can say   if  document body className match   bmyclass b                   If you want a location that shows you how jQuery does everything  I would suggest   http   code jquery com jquery-1 5 js

User · Answer

You can check whether element className matches   bthatClass b    b matches a word break   Or  you can use jQuery s own implementation   var className         selector        if          element className        replace    n t  g       indexOf   thatClass     gt  -1      To answer your more general question  you can look at jQuery s source code on github or at the source for hasClass specifically in this source viewer

User · Answer

Simply use classList contains     if  document body classList contains  thatClass             do some stuff     Other uses of classList   document body classList add  thisClass          body   addClass  thisClass     document body classList remove  thatClass          body   removeClass  thatClass     document body classList toggle  anotherClass          body   toggleClass  anotherClass      Browser Support    Chrome 8 0 Firefox 3 6 IE 10 Opera 11 50 Safari 5 1   classList Browser Support

User · Answer

a good solution for this is to work with classList and contains   i did it like this       for   var i   0  i  lt  container length  i               if   container i  classList contains  half width             So you need your element and check the list of the classes  If one of the classes is the same as the one you search for it will return true if not it will return false

User · Answer

What do you think about this approach    lt body class  thatClass anotherClass  gt   lt  body gt   var bodyClasses   document querySelector  body   className  var myClass   new RegExp  thatClass    var trueOrFalse   myClass test  bodyClasses      https   jsfiddle net 5sv30bhe

User · Answer

Use something like   Array prototype indexOf call myHTMLSelector classList   the-class

User · Answer

if  document body className split   s    indexOf  thatClass       -1           has  thatClass

[javascript] What is the "hasClass" function with plain JavaScript?

Examples related to javascript

Examples related to dom