Check if an element contains a class in JavaScript

Question

Using plain JavaScript  not jQuery   Is there any way to check if an element contains a class   Currently  I m doing this    x000D   x000D  var test   document getElementById  test    x000D  var testClass   test className  x000D   x000D  switch  testClass    x000D    case  class1   x000D      test innerHTML    I have class1   x000D      break  x000D    case  class2   x000D      test innerHTML    I have class2   x000D      break  x000D    case  class3   x000D      test innerHTML    I have class3   x000D      break  x000D    case  class4   x000D      test innerHTML    I have class4   x000D      break  x000D    default  x000D      test innerHTML       x000D    x000D   lt div id  test  class  class1  gt  lt  div gt  x000D   x000D   x000D    The issue is that if I change the HTML to this      lt div id  test  class  class1 class5  gt  lt  div gt       there s no longer an exact match  so I get the default output of nothing       But I still want the output to be I have class1 because the  lt div gt  still contains the  class1 class

User · Answer

in which element is currently the class '.bar' ? Here is another solution but it's up to you.

var reg = /Image/g, // regexp for an image element
query = document.querySelector('.bar'); // returns [object HTMLImageElement]
query += this.toString(); // turns object into a string

if (query.match(reg)) { // checks if it matches
  alert('the class .bar is attached to the following Element:\n' + query);
}

jsfiddle demo

Of course this is only a lookup for 1 simple element <img>(/Image/g) but you can put all in an array like <li> is /LI/g, <ul> = /UL/g etc.

User · Answer

Felix s trick of adding spaces to flank the className and the string you re searching for is the right approach to determining whether the elements has the class or not  To have different behaviour according to the class  you may use function references  or functions  within a map   function fn1 element      code for element with class1       function fn2 element      code for element with class2       function fn2 element      code for element with class3       var fns   class1   fn1   class2   fn2   class3   fn3    for var i in fns        if hasClass test  i             fns i  test              for var i in fns  iterates through the keys within the fns map  Having no break after fnsi allows the code to be executed whenever there is a match - so that if the element has  f i   class1 and class2  both fn1 and fn2 will be executed  The advantage of this approach is that the code to execute for each class is arbitrary  like the one in the switch statement  in your example all the cases performed a similar operation  but tomorrow you may need to do different things for each  You may simulate the default case by having a status variable telling whether a match was found in the loop or not

User · Answer

I know there a lot of answers but most of these are for additional functions and additional classes  This is the one I personally use  much cleaner and much less lines of code   if  document body className match  category-page          console log  yes

User · Answer

I think that perfect solution will be this  if    this  hasClass  your Class         alert  positive                else                   alert  Negative

User · Answer

This is a bit off  but if you have an event that triggers switch  you can do without classes    lt div id  classOne1  gt  lt  div gt   lt div id  classOne2  gt  lt  div gt   lt div id  classTwo3  gt  lt  div gt    You can do     body   click  function          switch   this id replace   0-9  g                  case  classOne   this innerHTML    I have classOne   break          case  classTwo   this innerHTML    I have classTwo   break          default  this innerHTML                     replace   0-9  g      removes digits from id   It is a bit hacky  but works for long switches without extra functions or loops

User · Answer

Just to add to the answer for people trying to find class names within inline SVG elements   Change the hasCLass   function to   function hasClass element  cls        return        element getAttribute  class          indexOf       cls         gt  -1        Instead of using the className property you ll need to use the getAttribute   method to grab the class name

User · Answer

Since  className is a string  you can use the string includes   method to check if your  className includes your class name  element className includes  quot class1 quot

User · Answer

The easy and effective solution is trying  contains method   test classList contains testClass

User · Answer

Use element classList  contains method  element classList contains class    This works on all current browsers and there are polyfills to support older browsers too   Alternatively  if you work with older browsers and don t want to use polyfills to fix them  using indexOf is correct  but you have to tweak it a little  function hasClass element  className        return        element className        indexOf       className        gt  -1     Otherwise you will also get true if the class you are looking for is part of another class name  DEMO jQuery uses a similar  if not the same  method   Applied to the example  As this does not work together with the switch statement  you could achieve the same effect with this code  var test   document getElementById  quot test quot        classes     class1    class2    class3    class4     test innerHTML    quot  quot    for var i   0  j   classes length  i  lt  j  i          if hasClass test  classes i              test innerHTML    quot I have  quot    classes i           break           It s also less redundant

User · Answer

Element matches   element matches selectorString  According to MDN Web Docs   The Element matches   method returns true if the element would be selected by the specified selector string  otherwise  returns false   Therefore  you can use Element matches   to determine if an element contains a class   x000D   x000D  const element   document querySelector   example     console log element matches   foo        true x000D   lt div id  example  class  foo bar  gt  lt  div gt  x000D   x000D   x000D   View Browser Compatibility

User · Answer

To check if an element contains a class  you use the contains   method of the classList property of the element   element classList contains className     Suppose you have the following  element   lt div class  quot secondary info quot  gt Item lt  div gt    To check if the  element contains the secondary class  you use the following code   const div   document querySelector  div     div classList contains  secondary       true  The following returns false because the  element doesn   t have the class error   const div   document querySelector  div     div classList contains  error       false

User · Answer

I created these functions for my website  I use only vanilla javascript  maybe it will help someone  First I created a function to get any HTML element     return an HTML element by ID  class or tag name     var getElement   function selector            var elements               if selector 0                        elements push document getElementById selector substring 1  selector length               else if selector 0                        elements   document getElementsByClassName selector substring 1  selector length              else               elements   document getElementsByTagName selector                     return elements          Then the function that recieve the class to remove and the selector of the element   var hasClass   function selector   class            var elements   getElement selector           var contains   false          for  let index   0  index  lt  elements length  index                  const curElement   elements index               if curElement classList contains  class                     contains   true                  break                                  return contains          Now you can use it like this   hasClass  body    gray   hasClass   like    green   hasClass   button    active     Hope it will help

User · Answer

Using the classList is also ideal HTML  lt div id  quot box quot  class  quot myClass quot  gt  lt  div gt   JavaScript const element   document querySelector  quot  box quot     element classList contains  quot myClass quot

User · Answer

I ve created a prototype method which uses classList  if possible  else resorts to indexOf    x000D   x000D  Element prototype hasClass   Element prototype hasClass     x000D    function classArr   x000D      var hasClass   0  x000D          className   this getAttribute  class    x000D     x000D      if  this    null     classArr     className   return false  x000D     x000D      if    classArr instanceof Array    x000D        classArr   classArr split       x000D   x000D      for  var i in classArr   x000D           this classList contains classArr i      for modern browsers x000D        if  className split classArr i   length  gt  1     x000D            hasClass    x000D   x000D      return hasClass    classArr length  x000D     x000D   x000D   x000D                                  x000D     TESTS  see browser s console when inspecting the output  x000D   x000D  var elm1   document querySelector  p    x000D  var elm2   document querySelector  b    x000D  var elm3   elm1 firstChild     textNode x000D  var elm4   document querySelector  text       SVG text x000D   x000D  console log  elm1    has class  a      elm1 hasClass  a      x000D  console log  elm1    has class  b      elm1 hasClass  b      x000D  console log  elm1    has class  c      elm1 hasClass  c      x000D  console log  elm1    has class  d      elm1 hasClass  d      x000D  console log  elm1    has class  a c      elm1 hasClass  a c      x000D  console log  elm1    has class  a d      elm1 hasClass  a d      x000D  console log  elm1    has class        elm1 hasClass        x000D   x000D  console log  elm2    has class  a      elm2 hasClass  a      x000D   x000D     console log  elm3    has class  a      elm3 hasClass  a      x000D   x000D  console log  elm4    has class  a      elm4 hasClass  a      x000D   lt p class  a b c  gt This is a  lt b gt test lt  b gt  string lt  p gt  x000D   lt svg xmlns  http   www w3 org 2000 svg  width  100px  height  50px  gt  x000D       lt text x  10  y  20  class  a  gt SVG Text Example lt  text gt  x000D   lt  svg gt  x000D   x000D   x000D    Test page

User · Answer

A simplified oneliner 1  function hasClassName classname id     return  String     document getElementById id         className             split   s             indexOf classname   gt   0      1 indexOf for arrays is not supported by IE  ofcourse   There are plenty of monkey patches to be found on the net for that

User · Answer

Since he wants to use switch    I m surprised no one has put this forth yet   var test   document getElementById  test    var testClasses   test className split       test innerHTML       for var i 0  i lt testClasses length  i          switch testClasses i             case  class1   test innerHTML     I have class1 lt br  gt    break          case  class2   test innerHTML     I have class2 lt br  gt    break          case  class3   test innerHTML     I have class3 lt br  gt    break          case  class4   test innerHTML     I have class4 lt br  gt    break          default  test innerHTML      unknown class     testClasses i       lt br  gt

User · Answer

This is a little old  but maybe someone will find my solution helpfull      Fix IE s indexOf Array if   Array prototype indexOf        Array prototype indexOf   function  searchElement            if  this    null  throw new TypeError            var t   Object this           var len   t length  gt  gt  gt  0          if  len     0  return -1          var n   0          if  arguments length  gt  0                n   Number arguments 1                if  n    n  n   0              else if  n    0  amp  amp  n    Infinity  amp  amp  n    -Infinity  n    n  gt  0    -1    Math floor Math abs n                      if  n  gt   len  return -1          var k   n  gt   0   n   Math max len - Math abs n   0           for    k  lt  len  k    if  k in t  amp  amp  t k      searchElement  return k          return -1             add hasClass support if   Element prototype hasClass        Element prototype hasClass   function  classname            if  this    null  throw new TypeError            return this className split      indexOf classname      -1   false   true

User · Answer

I would Poly fill the classList functionality and use the new syntax  This way newer browser will use the new implementation  which is much faster  and only old browsers will take the performance hit from the code   https   github com remy polyfills blob master classList js

User · Answer

Here is a little snippet If you   re trying to check wether element contains a class  without using jQuery     function hasClass element  className        return element className  amp  amp  new RegExp       s     className       s      test element className         This accounts for the fact that element might contain multiple class names separated by space   OR    You can also assign this function to element prototype     Element prototype hasClass   function className        return this className  amp  amp  new RegExp       s     className       s      test this className        And trigger it like this  very similar to jQuery   s  hasClass   function    document getElementById  MyDiv   hasClass  active

User · Answer

For me the most elegant and faster way to achieve it is   function hasClass el cl      return   el className  amp  amp    el className match new RegExp    b   cl     b

User · Answer

Tip  Try to remove dependencies of jQuery in your projects as much as you can - VanillaJS   document firstElementChild returns  lt html gt  tag then the classList attribute returns all classes added to it   if document firstElementChild classList contains  your-class             lt html gt  has  your-class    else           lt html gt  doesn t have  your-class

User · Answer

Try this one   document getElementsByClassName   function cl       var retnode          var myclass   new RegExp    b  cl    b       var elem   this getElementsByTagName          for  var i   0  i  lt  elem length  i             var classes   elem i  className         if  myclass test classes   retnode push elem i             return retnode

User · Answer

This is supported on IE8     First we check if classList exists if it does we can use the contains method which is supported by IE10   If we are on IE9 or 8 it falls back to using a regex  which is not as efficient but is a concise polyfill   if  el classList      el classList contains className     else     new RegExp           className             gi   test el className       Alternatively if you are compiling with babel you can simply use  el classList contains className

User · Answer

As the accepted answer suggests  Element className returns a string  so you can easily check if a class exists by using the indexOf   method  element className indexOf  animated    gt  -1  If you are interested in the performance difference between indexOf vs classList contains  using indexOf seems to be slightly faster  I did a quick benchmark performance test to check that  Here are my findings  ClassName indexOf vs ClassList contains

User · Answer

See this Codepen link for faster and easy way of checking an element if it has a specific class using vanilla JavaScript    hasClass  Vanilla JS    function hasClass element  cls        return        element className        indexOf       cls         gt  -1

User · Answer

className is just a string so you can use the regular indexOf function to see if the list of classes contains another string

User · Answer

In modern browsers  you can just use the contains method of Element classList   testElement classList contains className    Demo  x000D   x000D  var testElement   document getElementById  test     console log        main    testElement classList contains  main         cont    testElement classList contains  cont         content    testElement classList contains  content         main-cont    testElement classList contains  main-cont         main-content    testElement classList contains  main-content       x000D   lt div id  test  class  main main-content content  gt  lt  div gt  x000D   x000D   x000D    Supported browsers   from CanIUse com   Polyfill If you want to use Element classList but you also want to support older browsers  consider using this polyfill by Eli Grey

User · Answer

Here s a case-insensitive trivial solution   function hasClass element  classNameToTestFor        var classNames   element className split           for  var i   0  i  lt  classNames length  i              if  classNames i  toLowerCase      classNameToTestFor toLowerCase                  return true                      return false

User · Answer

If the element only has one class name you can quickly check it by getting the class attribute   The other answers are much more robust but this certainly has it s use cases   if   element getAttribute  class        classname

[javascript] Check if an element contains a class in JavaScript?

Examples related to javascript

Examples related to html

Examples related to css

Examples related to dom