How do I toggle an element s class in pure JavaScript

Question

I m looking for a way to convert this jQuery code  which is used in responsive menu section  to pure JavaScript   If it s hard to implement it s OK to use other JavaScript frameworks        btn-navbar   click function             container-fluid first   toggleClass  menu-hidden            menu   toggleClass  hidden-phone         if  typeof masonryGallery     undefined            masonryGallery

User · Answer

This is perhaps more succinct   function toggle element  klass      var classes   element className match   S  g               index   classes indexOf klass      index  gt   0   classes splice index  1    classes push klass     element className   classes join

User · Answer

Here is a code for IE    9 by using split      on the className    function toggleClass element  className        var arrayClass   element className split           var index   arrayClass indexOf className        if  index     -1            if  element className                       element className                          element className    className        else           arrayClass splice index  1           element className               for  var i   0  i  lt  arrayClass length  i                  element className    arrayClass i               if  i  lt  arrayClass length - 1                    element className

User · Answer

don t need regex just use classlist  x000D   x000D  var id document getElementById  myButton      function toggle el classname   if el classList contains classname    el classList remove classname    else  el classList add classname          id addEventListener  click   e   gt    toggle e target  red      x000D   red   background red    x000D   lt button id  myButton  gt Switch lt  button gt  x000D   x000D   x000D   Simple Usage above Example  x000D   x000D  var id document getElementById  myButton      function toggle el classname   el classList toggle classname        id addEventListener  click   e   gt    toggle e target  red      x000D   red   background red    x000D   lt button id  myButton  gt Switch lt  button gt  x000D   x000D   x000D

User · Answer

I know that I am late but  I happen to see this and I have a suggestion   For those looking for cross-browser support  I wouldn t recommend class toggling via JS  It may be a little more work but it is more supported through all browsers   x000D   x000D  document getElementById  myButton   addEventListener  click   themeswitch    function themeswitch       const Body   document body   if  Body style backgroundColor      white         Body style backgroundColor    black       else       Body style backgroundColor    white         x000D  body     background  white    x000D   lt button id  myButton  gt Switch lt  button gt  x000D   x000D   x000D

User · Answer

2014 answer  classList toggle   is the standard and supported by most browsers    Older browsers can use use classlist js for classList toggle     var menu   document querySelector   menu      Using a class instead  see note below  menu classList toggle  hidden-phone      As an aside  you shouldn t be using IDs  they leak globals into the JS window object

User · Answer

Take a look at this example  JS Fiddle  function toggleClass element  className       if   element     className           return             var classString   element className  nameIndex   classString indexOf className       if  nameIndex    -1            classString          className            else           classString   classString substr 0  nameIndex    classString substr nameIndex className length             element className   classString

User · Answer

Try this  hopefully it will work       mixin  functionality  for toggle class  function hasClass ele  clsName        var el   ele className      el   el split           if el indexOf clsName   gt  -1           var cIndex   el indexOf clsName           el splice cIndex  1           ele className                el forEach function item  index             ele className          item                       else           el push clsName           ele className                el forEach function item  index             ele className          item                         get all DOM element that we need for interactivity   var btnNavbar    document getElementsByClassName  btn-navbar   0   var containerFluid    document querySelector   container-fluid first    var menu   document getElementById  menu        on button click job btnNavbar addEventListener  click   function        hasClass containerFluid   menu-hidden        hasClass menu   hidden-phone       enter code here

User · Answer

If you want to toggle a class to an element using native solution  you could try this suggestion  I have tasted it in different cases  with or without other classes onto the element  and I think it works pretty much    function objSelector  objClass      document querySelectorAll objSelector  forEach function o         o addEventListener  click   function e           var  this   e target              klass    this className              findClass   new RegExp    b  s     objClass      S   s     g             if   findClass test   this className                 if  klass                     this className   klass         objClass              else                   this setAttribute  class   objClass           else                        klass   klass replace  findClass                    if klass   this className   klass              else  this removeAttribute  class                                 yourElemetnSelector    yourClass

User · Answer

This one works in earlier versions of IE also    x000D   x000D  function toogleClass ele  class1    x000D    var classes   ele className  x000D    var regex   new RegExp    b    class1      b    x000D    var hasOne   classes match regex   x000D    class1   class1 replace   s  g       x000D    if  hasOne  x000D      ele className   classes replace regex       x000D    else x000D      ele className   classes   class1  x000D    x000D   red   x000D    background-color  red x000D    x000D  div   x000D    width  100px  x000D    height  100px  x000D    margin-bottom  10px  x000D    border  1px solid black  x000D    x000D   lt div class  does red redAnother   onclick  toogleClass this   red    gt  lt  div gt  x000D   x000D   lt div class  does collapse navbar-collapse   onclick  toogleClass this   red    gt  lt  div gt  x000D   x000D   x000D

User · Answer

Here is solution implemented with ES6  const toggleClass    el  className    gt  el classList toggle className     usage example  toggleClass document querySelector  div active     active       The div container will not have the  active  class anymore

[javascript] How do I toggle an element's class in pure JavaScript?

Examples related to javascript

Examples related to dom

Examples related to toggle