How to add and remove classes in Javascript without jQuery

Question

I m looking for a fast and secure way to add and remove classes from an html element without jQuery  It also should be working in early IE  IE8 and up

User · Accepted Answer

The following 3 functions work in browsers which don't support classList:

function hasClass(el, className)
{
    if (el.classList)
        return el.classList.contains(className);
    return !!el.className.match(new RegExp('(\\s|^)' + className + '(\\s|$)'));
}

function addClass(el, className)
{
    if (el.classList)
        el.classList.add(className)
    else if (!hasClass(el, className))
        el.className += " " + className;
}

function removeClass(el, className)
{
    if (el.classList)
        el.classList.remove(className)
    else if (hasClass(el, className))
    {
        var reg = new RegExp('(\\s|^)' + className + '(\\s|$)');
        el.className = el.className.replace(reg, ' ');
    }
}

https://jaketrent.com/post/addremove-classes-raw-javascript/

User · Answer

When you remove RegExp from the equation you leave a less  friendly  code  but it still can be done with the  much  less elegant way of split     function removeClass classString  toRemove        classes   classString split           var out   Array        for  var i 0  i lt classes length  i              if  classes i  length    0     double spaces can create empty elements             continue          if  classes i     toRemove     don t include this one             continue          out push classes i             return out join           This method is a lot bigger than a simple replace   but at least it can be used on older browsers  And in case the browser doesn t even support the split   command it s relatively easy to add it using prototype

User · Answer

Another approach to add the class to element using pure JavaScript  For adding class   document getElementById  div1   classList add  classToBeAdded      For removing class   document getElementById  div1   classList remove  classToBeRemoved      Note  but not supported in IE  lt   9 or Safari  lt  5 0

User · Answer

Updated JS Class Method The add methods do not add duplicate classes and the remove method only removes class with exact string match  const addClass    selector  classList    gt      const element   document querySelector selector     const classes   classList split        classes forEach  item  id    gt        element classList add item          const removeClass    selector  classList    gt      const element   document querySelector selector     const classes   classList split        classes forEach  item  id    gt        element classList remove item          addClass  button submit    text-white color-blue      add text-white and color-blue classes removeClass   home  paragraph    text-red bold      removes text-red and bold classes

User · Answer

For future friendliness  I second the recommendation for classList with polyfill shim  https   developer mozilla org en-US docs Web API Element classList wrapper  var elem   document getElementById   some-id     elem classList add  some-class       Add class elem classList remove  some-other-class       Remove class elem classList toggle  some-other-class       Add or remove class if   elem classList contains  some-third-class          Check for class     console log  yep

User · Answer

Add  amp  Remove Classes  tested on IE8    Add trim   to IE  taken from   trim   in JavaScript not working in IE   if typeof String prototype trim      function       String prototype trim   function         return this replace    s   s   g                Add and Remove Classes       function addClass element className      var currentClassName   element getAttribute  class      if  typeof currentClassName     undefined   amp  amp  currentClassName        element setAttribute  class  currentClassName        className         else       element setAttribute  class  className          function removeClass element className      var currentClassName   element getAttribute  class      if  typeof currentClassName     undefined   amp  amp  currentClassName         var class2RemoveIndex   currentClassName indexOf className       if  class2RemoveIndex    -1            var class2Remove   currentClassName substr class2RemoveIndex  className length           var updatedClassName   currentClassName replace class2Remove     trim            element setAttribute  class  updatedClassName               else       element removeAttribute  class                Usage   var targetElement   document getElementById  myElement     addClass targetElement  someClass     removeClass targetElement  someClass      A working JSFIDDLE  http   jsfiddle net fixit bac2vuzh 1

User · Answer

To add class without JQuery just append yourClassName to your element className  document documentElement className      yourClassName    To remove class you can use replace   function  document documentElement className replace        s yourClassName    S         Also as  DavidThomas mentioned you d need to use the new RegExp   constructor if you want to pass class names dynamically to the replace function

User · Answer

I m using this simple code for this task   CSS Code   demo        background  tomato       color  white      Javascript code  function myFunction            Assign element to x variable by id         var x   document getElementById  para        if  x hasAttribute  class                   x removeAttribute  class               else           x setAttribute  class    demo

User · Answer

Try this     const element   document querySelector   elementId      if  element classList contains  classToBeRemoved          element classList remove  classToBeRemoved

User · Answer

classList is available from IE10 onwards  use that if you can   element classList add  something    element classList remove  some-class

[javascript] How to add and remove classes in Javascript without jQuery

Examples related to javascript

Examples related to html