How can I change an element s class with JavaScript

Question

How can I change the class of an HTML element in response to an onclick or any other events using JavaScript

User · Answer

I would use jQuery and write something like this:

jQuery(function($) {
    $("#some-element").click(function() {
        $(this).toggleClass("clicked");
    });
});

This code adds a function to be called when an element of the id some-element is clicked. The function appends clicked to the element's class attribute if it's not already part of it, and removes it if it's there.

Yes you do need to add a reference to the jQuery library in your page to use this code, but at least you can feel confident the most functions in the library would work on pretty much all the modern browsers, and it will save you time implementing your own code to do the same.

Thanks

User · Answer

A couple of minor notes and tweaks on the previous regexes   You ll want to do it globally in case the class list has the class name more than once  And  you ll probably want to strip spaces from the ends of the class list and convert multiple spaces to one space to keep from getting runs of spaces  None of these things should be a problem if the only code dinking with the class names uses the regex below and removes a name before adding it  But  Well  who knows who might be dinking with the class name list   This regex is case insensitive so that bugs in class names may show up before the code is used on a browser that doesn t care about case in class names   var s    testing   one   four  one  two   var cls    one   var rg            new RegExp       s      cls       s        ig    alert       s replace rg               var cls    test   var rg            new RegExp       s      cls       s        ig    alert       s replace rg               var cls    testing   var rg            new RegExp       s      cls       s        ig    alert       s replace rg               var cls    tWo   var rg            new RegExp       s      cls       s        ig    alert       s replace rg

User · Answer

This is easiest with a library like jQuery    lt input type  button  onClick  javascript test byid     value  id  second     gt    lt script gt  function test byid             second   toggleClass  highlight       lt  script gt

User · Answer

Modern HTML5 Techniques for changing classes Modern browsers have added classList which provides methods to make it easier to manipulate classes without needing a library  document getElementById  quot MyElement quot   classList add  MyClass     document getElementById  quot MyElement quot   classList remove  MyClass     if   document getElementById  quot MyElement quot   classList contains  MyClass      document getElementById  quot MyElement quot   classList toggle  MyClass     Unfortunately  these do not work in Internet Explorer prior to v10  though there is a shim to add support for it to IE8 and IE9  available from this page  It is  though  getting more and more supported  Simple cross-browser solution The standard JavaScript way to select an element is using document getElementById  quot Id quot    which is what the following examples use - you can of course obtain elements in other ways  and in the right situation may simply use this instead - however  going into detail on this is beyond the scope of the answer  To change all classes for an element  To replace all existing classes with one or more new classes  set the className attribute  document getElementById  quot MyElement quot   className    quot MyClass quot     You can use a space-delimited list to apply multiple classes   To add an additional class to an element  To add a class to an element  without removing affecting existing values  append a space and the new classname  like so  document getElementById  quot MyElement quot   className     quot  MyClass quot    To remove a class from an element  To remove a single class to an element  without affecting other potential classes  a simple regex replace is required  document getElementById  quot MyElement quot   className      document getElementById  quot MyElement quot   className replace                s MyClass    S  g           Code wrapped for readability - above is all one statement     An explanation of this regex is as follows        s    Match the start of the string or any single whitespace character  MyClass    The literal text for the classname to remove      S      Negative lookahead to verify the above is the whole classname            Ensures there is no non-space character following             i e  must be the end of the string or space   The g flag tells the replace to repeat as required  in case the class name has been added multiple times  To check if a class is already applied to an element  The same regex used above for removing a class can also be used as a check as to whether a particular class exists  if   document getElementById  quot MyElement quot   className match        s MyClass    S            Assigning these actions to onclick events  Whilst it is possible to write JavaScript directly inside the HTML event attributes  such as onclick  quot this className    MyClass  quot   this is not recommended behaviour  Especially on larger applications  more maintainable code is achieved by separating HTML markup from JavaScript interaction logic  The first step to achieving this is by creating a function  and calling the function in the onclick attribute  for example   lt script type  quot text javascript quot  gt      function changeClass               Code examples from above        lt  script gt       lt button onclick  quot changeClass   quot  gt My Button lt  button gt    It is not required to have this code in script tags  this is simply for the brevity of example  and including the JavaScript in a distinct file may be more appropriate   The second step is to move the onclick event out of the HTML and into JavaScript  for example using addEventListener  lt script type  quot text javascript quot  gt      function changeClass               Code examples from above            window onload   function            document getElementById  quot MyElement quot   addEventListener   click   changeClass          lt  script gt       lt button id  quot MyElement quot  gt My Button lt  button gt    Note that the window onload part is required so that the contents of that function are executed after the HTML has finished loading - without this  the MyElement might not exist when the JavaScript code is called  so that line would fail    JavaScript Frameworks and Libraries The above code is all in standard JavaScript  however  it is common practice to use either a framework or a library to simplify common tasks  as well as benefit from fixed bugs and edge cases that you might not think of when writing your code  Whilst some people consider it overkill to add a  50   KB framework for simply changing a class  if you are doing any substantial amount of JavaScript work or anything that might have unusual cross-browser behavior  it is well worth considering   Very roughly  a library is a set of tools designed for a specific task  whilst a framework generally contains multiple libraries and performs a complete set of duties   The examples above have been reproduced below using jQuery  probably the most commonly used JavaScript library  though there are others worth investigating too    Note that   here is the jQuery object   Changing Classes with jQuery      MyElement   addClass  MyClass         MyElement   removeClass  MyClass     if       MyElement   hasClass  MyClass      In addition  jQuery provides a shortcut for adding a class if it doesn t apply  or removing a class that does      MyElement   toggleClass  MyClass          Assigning a function to a click event with jQuery      MyElement   click changeClass    or  without needing an id      button contains My Button    click changeClass

User · Answer

Change an element s class in vanilla JavaScript with IE6 support  You may try to use node attributes property to keep compatibility with old browsers even IE6    x000D   x000D  function getClassNode element    x000D    for  var i   element attributes length  i--   x000D      if  element attributes i  nodeName      class   x000D        return element attributes i   x000D    x000D   x000D  function removeClass classNode  className    x000D    var index  classList   classNode value split       x000D    if   index   classList indexOf className    gt  -1    x000D      classList splice index  1   x000D      classNode value   classList join       x000D      x000D    x000D   x000D  function hasClass classNode  className    x000D    return classNode value indexOf className   gt  -1  x000D    x000D   x000D  function addClass classNode  className    x000D    if   hasClass classNode  className   x000D      classNode value          className  x000D    x000D   x000D  document getElementById  message   addEventListener  click   function     x000D    var classNode   getClassNode this   x000D    var className   hasClass classNode   red    amp  amp   blue      red   x000D   x000D    removeClass classNode   red    x000D    removeClass classNode   blue    x000D   x000D    addClass classNode  className   x000D     x000D   red   x000D    color  red  x000D    x000D   red before   x000D    content   I am red     x000D    x000D   red after   x000D    content    again   x000D    x000D   blue   x000D    color  blue  x000D    x000D   blue before   x000D    content   I am blue    x000D    x000D   lt span id  message  class    gt Click me lt  span gt  x000D   x000D   x000D

User · Answer

Here is simple jQuery code to do that       class1   click function argument            parentclass   removeClass  classtoremove        setTimeout function  argument                parentclass   addClass  classtoadd           100         Here    Class1 is a listener for an event  The parent class is the class which hosts the class you want to change Classtoremove is the old class you have  Class to add is the new class that you want to add  100 is the timeout delay during which the class is changed    Good Luck

User · Answer

try  element className  second     x000D   x000D  function change box    box className  second    x000D   first    width   70px  height   70px  background   ff0                   x000D   second   width  150px  height  150px  background   f00  transition  1s   x000D   lt div onclick  change this   class  first  gt Click me lt  div gt  x000D   x000D   x000D

User · Answer

You can use node className like so   document getElementById  foo   className    bar     This should work in IE5 5 and up according to PPK

User · Answer

I use the following vanilla JavaScript functions in my code  They use regular expressions and indexOf but do not require quoting special characters in regular expressions   function addClass el  cn        var c0          el className        replace   s  g                c1          cn        replace   s  g            if  c0 indexOf c1   lt  0            el className    c0   c1  replace   s  g       replace        g                function delClass el  cn        var c0          el className        replace   s  g                c1          cn        replace   s  g            if  c0 indexOf c1   gt   0            el className   c0 replace c1       replace   s  g       replace        g                 You can also use element classList in modern browsers

User · Answer

Yes there is many ways to do this  In ES6 syntax we can achieve easily   Use this code toggle add and remove class    x000D   x000D  const tabs document querySelectorAll   menu li    x000D   x000D  for let tab of tabs   x000D     x000D    tab onclick function    x000D       x000D    let activetab document querySelectorAll  li active    x000D       x000D    activetab 0  classList remove  active   x000D     x000D      tab classList add  active     x000D      x000D     x000D    x000D  body   x000D      padding 20px  x000D      font-family sans-serif      x000D    x000D   x000D  ul   x000D      margin 20px 0  x000D      list-style none  x000D    x000D   x000D  li   x000D      background  dfdfdf  x000D      padding 10px  x000D      margin 6px 0  x000D      cursor pointer  x000D    x000D   x000D  li active   x000D      background  2794c7  x000D      font-weight bold  x000D      color  ffffff  x000D    x000D   lt i gt Please click an item  lt  i gt  x000D   x000D   lt ul class  menu  gt  x000D     lt li class  active  gt  lt span gt Three lt  span gt  lt  li gt  x000D     lt li gt  lt span gt Two lt  span gt  lt  li gt  x000D     lt li gt  lt span gt One lt  span gt  lt  li gt  x000D   lt  ul gt  x000D   x000D   x000D

User · Answer

No offense  but it s unclever to change class on-the-fly as it forces the CSS interpreter to recalculate the visual presentation of the entire web page   The reason is that it is nearly impossible for the CSS interpreter to know if any inheritance or cascading could be changed  so the short answer is   Never ever change className on-the-fly  -   But usually you ll only need to change a property or two  and that is easily implemented   function highlight elm       elm style backgroundColor    345       elm style color     fff

User · Answer

No offense  but it s unclever to change class on-the-fly as it forces the CSS interpreter to recalculate the visual presentation of the entire web page   The reason is that it is nearly impossible for the CSS interpreter to know if any inheritance or cascading could be changed  so the short answer is   Never ever change className on-the-fly  -   But usually you ll only need to change a property or two  and that is easily implemented   function highlight elm       elm style backgroundColor    345       elm style color     fff

User · Answer

There is a property className in javascript to change the name of the class of an HTML element  The existing class value will be replaced with the new one  that you have assigned in className    lt  DOCTYPE html gt   lt html gt   lt head gt   lt title gt How to change class of an HTML element in Javascript  lt  title gt   lt link rel  stylesheet  href  https   cdnjs cloudflare com ajax libs font-awesome 4 7 0 css font-awesome min css  gt   lt  head gt   lt body gt   lt h1 align  center  gt  lt i class  fa fa-home  id  icon  gt  lt  i gt  lt  h1 gt  lt br   gt    lt center gt  lt button id  change-class  gt Change Class lt  button gt  lt  center gt    lt script gt  var change class document getElementById  change-class    change class onclick function         var icon document getElementById  icon        icon className  fa fa-gear       lt  script gt   lt  body gt   lt  html gt    Credit - https   jaischool com javascript-lang how-to-change-class-name-of-an-html-element-in-javascript html

User · Answer

You can use node className like so   document getElementById  foo   className    bar     This should work in IE5 5 and up according to PPK

User · Answer

Modern HTML5 Techniques for changing classes Modern browsers have added classList which provides methods to make it easier to manipulate classes without needing a library  document getElementById  quot MyElement quot   classList add  MyClass     document getElementById  quot MyElement quot   classList remove  MyClass     if   document getElementById  quot MyElement quot   classList contains  MyClass      document getElementById  quot MyElement quot   classList toggle  MyClass     Unfortunately  these do not work in Internet Explorer prior to v10  though there is a shim to add support for it to IE8 and IE9  available from this page  It is  though  getting more and more supported  Simple cross-browser solution The standard JavaScript way to select an element is using document getElementById  quot Id quot    which is what the following examples use - you can of course obtain elements in other ways  and in the right situation may simply use this instead - however  going into detail on this is beyond the scope of the answer  To change all classes for an element  To replace all existing classes with one or more new classes  set the className attribute  document getElementById  quot MyElement quot   className    quot MyClass quot     You can use a space-delimited list to apply multiple classes   To add an additional class to an element  To add a class to an element  without removing affecting existing values  append a space and the new classname  like so  document getElementById  quot MyElement quot   className     quot  MyClass quot    To remove a class from an element  To remove a single class to an element  without affecting other potential classes  a simple regex replace is required  document getElementById  quot MyElement quot   className      document getElementById  quot MyElement quot   className replace                s MyClass    S  g           Code wrapped for readability - above is all one statement     An explanation of this regex is as follows        s    Match the start of the string or any single whitespace character  MyClass    The literal text for the classname to remove      S      Negative lookahead to verify the above is the whole classname            Ensures there is no non-space character following             i e  must be the end of the string or space   The g flag tells the replace to repeat as required  in case the class name has been added multiple times  To check if a class is already applied to an element  The same regex used above for removing a class can also be used as a check as to whether a particular class exists  if   document getElementById  quot MyElement quot   className match        s MyClass    S            Assigning these actions to onclick events  Whilst it is possible to write JavaScript directly inside the HTML event attributes  such as onclick  quot this className    MyClass  quot   this is not recommended behaviour  Especially on larger applications  more maintainable code is achieved by separating HTML markup from JavaScript interaction logic  The first step to achieving this is by creating a function  and calling the function in the onclick attribute  for example   lt script type  quot text javascript quot  gt      function changeClass               Code examples from above        lt  script gt       lt button onclick  quot changeClass   quot  gt My Button lt  button gt    It is not required to have this code in script tags  this is simply for the brevity of example  and including the JavaScript in a distinct file may be more appropriate   The second step is to move the onclick event out of the HTML and into JavaScript  for example using addEventListener  lt script type  quot text javascript quot  gt      function changeClass               Code examples from above            window onload   function            document getElementById  quot MyElement quot   addEventListener   click   changeClass          lt  script gt       lt button id  quot MyElement quot  gt My Button lt  button gt    Note that the window onload part is required so that the contents of that function are executed after the HTML has finished loading - without this  the MyElement might not exist when the JavaScript code is called  so that line would fail    JavaScript Frameworks and Libraries The above code is all in standard JavaScript  however  it is common practice to use either a framework or a library to simplify common tasks  as well as benefit from fixed bugs and edge cases that you might not think of when writing your code  Whilst some people consider it overkill to add a  50   KB framework for simply changing a class  if you are doing any substantial amount of JavaScript work or anything that might have unusual cross-browser behavior  it is well worth considering   Very roughly  a library is a set of tools designed for a specific task  whilst a framework generally contains multiple libraries and performs a complete set of duties   The examples above have been reproduced below using jQuery  probably the most commonly used JavaScript library  though there are others worth investigating too    Note that   here is the jQuery object   Changing Classes with jQuery      MyElement   addClass  MyClass         MyElement   removeClass  MyClass     if       MyElement   hasClass  MyClass      In addition  jQuery provides a shortcut for adding a class if it doesn t apply  or removing a class that does      MyElement   toggleClass  MyClass          Assigning a function to a click event with jQuery      MyElement   click changeClass    or  without needing an id      button contains My Button    click changeClass

User · Answer

This is easiest with a library like jQuery    lt input type  button  onClick  javascript test byid     value  id  second     gt    lt script gt  function test byid             second   toggleClass  highlight       lt  script gt

User · Answer

The OP question was How can I change an element s class with JavaScript   Modern browsers allow you to do this with one line of javascript   document getElementById  id   classList replace  span1   span2    The classList attribute provides a DOMTokenList which has a variety of methods  You can operate on an element s classList using simple manipulations like add    remove   or replace    Or get very sophisticated and manipulate classes like you would an object or Map with keys    values    entries    Peter Boughton s answer is a great one but it s now over a decade old  All modern browsers now support DOMTokenList - see https   caniuse com  search classList and even IE11 supports some DOMTokenList methods

User · Answer

The OP question was How can I change an element s class with JavaScript   Modern browsers allow you to do this with one line of javascript   document getElementById  id   classList replace  span1   span2    The classList attribute provides a DOMTokenList which has a variety of methods  You can operate on an element s classList using simple manipulations like add    remove   or replace    Or get very sophisticated and manipulate classes like you would an object or Map with keys    values    entries    Peter Boughton s answer is a great one but it s now over a decade old  All modern browsers now support DOMTokenList - see https   caniuse com  search classList and even IE11 supports some DOMTokenList methods

User · Answer

This is working for me   function setCSS eleID        var currTabElem   document getElementById eleID        currTabElem setAttribute  class    some class name        currTabElem setAttribute  className    some class name

User · Answer

No offense  but it s unclever to change class on-the-fly as it forces the CSS interpreter to recalculate the visual presentation of the entire web page   The reason is that it is nearly impossible for the CSS interpreter to know if any inheritance or cascading could be changed  so the short answer is   Never ever change className on-the-fly  -   But usually you ll only need to change a property or two  and that is easily implemented   function highlight elm       elm style backgroundColor    345       elm style color     fff

User · Answer

just say myElement classList  new-class  unless you need to maintain other existing classes in which case you can use the classList add   remove methods    x000D   x000D  var doc   document  x000D  var divOne   doc getElementById  one    x000D  var goButton   doc getElementById  go    x000D   x000D  goButton addEventListener  click   function     x000D    divOne classList  blue   x000D      x000D  div  x000D    min-height 48px  x000D    min-width 48px  x000D    x000D   bordered  x000D    border  1px solid black  x000D    x000D   green  x000D    background green  x000D    x000D   blue  x000D    background  blue  x000D    x000D   lt button id  go  gt Change Class lt  button gt  x000D   x000D   lt div id  one  class  bordered green  gt  x000D   x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Just to add on information from another popular framework  Google Closures  see their dom classes class   goog dom classes add element  var args   goog dom classes addRemove element  classesToRemove  classesToAdd   goog dom classes remove element  var args    One option for selecting the element is using goog dom query with a CSS3 selector   var myElement   goog dom query   MyElement   0

User · Answer

Here s a toggleClass to toggle add remove a class on an element      If newState is provided add remove theClass accordingly  otherwise toggle theClass function toggleClass elem  theClass  newState        var matchRegExp   new RegExp         s     theClass         S     g        var add  arguments length gt 2   newState    elem className match matchRegExp     null         elem className elem className replace matchRegExp          clear all     if  add  elem className          theClass      see jsfiddle  also see my answer here for creating a new class dynamically

User · Answer

Using pure JavaScript code   function hasClass ele  cls        return ele className match new RegExp     s       cls       s           function addClass ele  cls        if   this hasClass ele  cls   ele className          cls     function removeClass ele  cls        if  hasClass ele  cls             var reg   new RegExp     s       cls       s               ele className   ele className replace reg                 function replaceClass ele  oldClass  newClass       if hasClass ele  oldClass            removeClass ele  oldClass           addClass ele  newClass             return     function toggleClass ele  cls1  cls2       if hasClass ele  cls1            replaceClass ele  cls1  cls2        else if hasClass ele  cls2            replaceClass ele  cls2  cls1        else          addClass ele  cls1

User · Answer

Working JavaScript code    lt div id  div add  class  div add  gt Add class from Javascript lt  div gt   lt div id  div replace  class  div replace  gt Replace class from Javascript lt  div gt   lt div id  div remove  class  div remove  gt Remove class from Javascript lt  div gt   lt button onClick  div add class     gt Add class from Javascript lt  button gt   lt button onClick  div replace class     gt Replace class from Javascript lt  button gt   lt button onClick  div remove class     gt Remove class from Javascript lt  button gt   lt script type  text javascript  gt      function div add class                 document getElementById  div add   className      div added             function div replace class                 document getElementById  div replace   className    div replaced             function div remove class                 document getElementById  div remove   className              lt  script gt    You can download a working code from this link

User · Answer

No offense  but it s unclever to change class on-the-fly as it forces the CSS interpreter to recalculate the visual presentation of the entire web page   The reason is that it is nearly impossible for the CSS interpreter to know if any inheritance or cascading could be changed  so the short answer is   Never ever change className on-the-fly  -   But usually you ll only need to change a property or two  and that is easily implemented   function highlight elm       elm style backgroundColor    345       elm style color     fff

User · Answer

The line  document getElementById  MyElement   className   document getElementById  MyElement   className replace   bMyClass b         should be   document getElementById  MyElement   className   document getElementById  MyElement   className replace    bMyClass b

User · Answer

function classed el  class name  add class      const re   new RegExp         s     class name         S     g      if  add class  amp  amp   el className match re   el className          class name   else if   add class  el className   el className replace re           using the accepted answer above here is a simple cross-browser function to add and remove class  add class   classed document getElementById  denis     active   true    remove class   classed document getElementById  denis     active   false

User · Answer

classList DOM API   A very convenient manner of adding and removing classes is the classList DOM API  This API allows us to select all classes of a specific DOM element in order to modify the list using javascript  For example    x000D   x000D  const el   document getElementById  main    x000D  console log el classList   x000D   lt div class  content wrapper animated  id  main  gt  lt  div gt  x000D   x000D   x000D    We can observe in the log that we are getting back an object with not only the classes of the element  but also many auxiliary methods and properties  This object inherits from the interface DOMTokenList  an interface which is used in the DOM to represent a set of space separated tokens  like classes    Example    x000D   x000D  const el   document getElementById  container    x000D   x000D   x000D  function addClass      x000D     el classList add  newclass    x000D    x000D   x000D   x000D  function replaceClass      x000D       el classList replace  foo    newFoo    x000D    x000D   x000D   x000D  function removeClass      x000D         el classList remove  bar    x000D    x000D  button  x000D    margin  20px  x000D    x000D   x000D   foo  x000D    color  red  x000D    x000D   x000D   newFoo   x000D    color  blue  x000D    x000D   x000D   bar  x000D    background-color powderblue  x000D    x000D   x000D   newclass  x000D    border  2px solid green  x000D    x000D   lt div class  foo bar  id  container  gt  x000D     Sed ut perspiciatis unde omnis  x000D    iste natus error sit voluptatem accusantium doloremque laudantium   x000D    totam rem aperiam  eaque ipsa quae ab illo inventore veritatis et  x000D    quasi architecto beatae vitae dicta sunt explicabo  Nemo enim ipsam  x000D    voluptatem quia voluptas  x000D    lt  div gt  x000D     x000D   lt button onclick  addClass    gt AddClass lt  button gt  x000D     x000D   lt button onclick  replaceClass    gt ReplaceClass lt  button gt  x000D     x000D   lt button onclick  removeClass    gt removeClass lt  button gt  x000D     x000D   x000D   x000D

User · Answer

In one of my old projects that did not use jQuery  I built the following functions for adding  removing and checking if element has class   function hasClass ele  cls        return ele className match new RegExp     s       cls       s          function addClass ele  cls        if   hasClass ele  cls   ele className          cls    function removeClass ele  cls        if  hasClass ele  cls             var reg   new RegExp     s       cls       s               ele className   ele className replace reg                  So  for example  if I want onclick to add some class to the button I can use this    lt script type  text javascript  gt      function changeClass btn  cls            if  hasClass btn  cls                 addClass btn  cls                    lt  script gt       lt button onclick  changeClass this   someClass    gt My Button lt  button gt    By now for sure it would just be better to use jQuery

User · Answer

classList DOM API   A very convenient manner of adding and removing classes is the classList DOM API  This API allows us to select all classes of a specific DOM element in order to modify the list using javascript  For example    x000D   x000D  const el   document getElementById  main    x000D  console log el classList   x000D   lt div class  content wrapper animated  id  main  gt  lt  div gt  x000D   x000D   x000D    We can observe in the log that we are getting back an object with not only the classes of the element  but also many auxiliary methods and properties  This object inherits from the interface DOMTokenList  an interface which is used in the DOM to represent a set of space separated tokens  like classes    Example    x000D   x000D  const el   document getElementById  container    x000D   x000D   x000D  function addClass      x000D     el classList add  newclass    x000D    x000D   x000D   x000D  function replaceClass      x000D       el classList replace  foo    newFoo    x000D    x000D   x000D   x000D  function removeClass      x000D         el classList remove  bar    x000D    x000D  button  x000D    margin  20px  x000D    x000D   x000D   foo  x000D    color  red  x000D    x000D   x000D   newFoo   x000D    color  blue  x000D    x000D   x000D   bar  x000D    background-color powderblue  x000D    x000D   x000D   newclass  x000D    border  2px solid green  x000D    x000D   lt div class  foo bar  id  container  gt  x000D     Sed ut perspiciatis unde omnis  x000D    iste natus error sit voluptatem accusantium doloremque laudantium   x000D    totam rem aperiam  eaque ipsa quae ab illo inventore veritatis et  x000D    quasi architecto beatae vitae dicta sunt explicabo  Nemo enim ipsam  x000D    voluptatem quia voluptas  x000D    lt  div gt  x000D     x000D   lt button onclick  addClass    gt AddClass lt  button gt  x000D     x000D   lt button onclick  replaceClass    gt ReplaceClass lt  button gt  x000D     x000D   lt button onclick  removeClass    gt removeClass lt  button gt  x000D     x000D   x000D   x000D

User · Answer

Change an element s CSS class with JavaScript in ASP NET   Protected Sub Page Load ByVal sender As Object  ByVal e As System EventArgs  Handles Me Load     If Not Page IsPostBack Then         lbSave Attributes Add  onmouseover    this className    LinkButtonStyle1            lbSave Attributes Add  onmouseout    this className    LinkButtonStyle            lbCancel Attributes Add  onmouseover    this className    LinkButtonStyle1            lbCancel Attributes Add  onmouseout    this className    LinkButtonStyle        End If End Sub

User · Answer

Modern HTML5 Techniques for changing classes Modern browsers have added classList which provides methods to make it easier to manipulate classes without needing a library  document getElementById  quot MyElement quot   classList add  MyClass     document getElementById  quot MyElement quot   classList remove  MyClass     if   document getElementById  quot MyElement quot   classList contains  MyClass      document getElementById  quot MyElement quot   classList toggle  MyClass     Unfortunately  these do not work in Internet Explorer prior to v10  though there is a shim to add support for it to IE8 and IE9  available from this page  It is  though  getting more and more supported  Simple cross-browser solution The standard JavaScript way to select an element is using document getElementById  quot Id quot    which is what the following examples use - you can of course obtain elements in other ways  and in the right situation may simply use this instead - however  going into detail on this is beyond the scope of the answer  To change all classes for an element  To replace all existing classes with one or more new classes  set the className attribute  document getElementById  quot MyElement quot   className    quot MyClass quot     You can use a space-delimited list to apply multiple classes   To add an additional class to an element  To add a class to an element  without removing affecting existing values  append a space and the new classname  like so  document getElementById  quot MyElement quot   className     quot  MyClass quot    To remove a class from an element  To remove a single class to an element  without affecting other potential classes  a simple regex replace is required  document getElementById  quot MyElement quot   className      document getElementById  quot MyElement quot   className replace                s MyClass    S  g           Code wrapped for readability - above is all one statement     An explanation of this regex is as follows        s    Match the start of the string or any single whitespace character  MyClass    The literal text for the classname to remove      S      Negative lookahead to verify the above is the whole classname            Ensures there is no non-space character following             i e  must be the end of the string or space   The g flag tells the replace to repeat as required  in case the class name has been added multiple times  To check if a class is already applied to an element  The same regex used above for removing a class can also be used as a check as to whether a particular class exists  if   document getElementById  quot MyElement quot   className match        s MyClass    S            Assigning these actions to onclick events  Whilst it is possible to write JavaScript directly inside the HTML event attributes  such as onclick  quot this className    MyClass  quot   this is not recommended behaviour  Especially on larger applications  more maintainable code is achieved by separating HTML markup from JavaScript interaction logic  The first step to achieving this is by creating a function  and calling the function in the onclick attribute  for example   lt script type  quot text javascript quot  gt      function changeClass               Code examples from above        lt  script gt       lt button onclick  quot changeClass   quot  gt My Button lt  button gt    It is not required to have this code in script tags  this is simply for the brevity of example  and including the JavaScript in a distinct file may be more appropriate   The second step is to move the onclick event out of the HTML and into JavaScript  for example using addEventListener  lt script type  quot text javascript quot  gt      function changeClass               Code examples from above            window onload   function            document getElementById  quot MyElement quot   addEventListener   click   changeClass          lt  script gt       lt button id  quot MyElement quot  gt My Button lt  button gt    Note that the window onload part is required so that the contents of that function are executed after the HTML has finished loading - without this  the MyElement might not exist when the JavaScript code is called  so that line would fail    JavaScript Frameworks and Libraries The above code is all in standard JavaScript  however  it is common practice to use either a framework or a library to simplify common tasks  as well as benefit from fixed bugs and edge cases that you might not think of when writing your code  Whilst some people consider it overkill to add a  50   KB framework for simply changing a class  if you are doing any substantial amount of JavaScript work or anything that might have unusual cross-browser behavior  it is well worth considering   Very roughly  a library is a set of tools designed for a specific task  whilst a framework generally contains multiple libraries and performs a complete set of duties   The examples above have been reproduced below using jQuery  probably the most commonly used JavaScript library  though there are others worth investigating too    Note that   here is the jQuery object   Changing Classes with jQuery      MyElement   addClass  MyClass         MyElement   removeClass  MyClass     if       MyElement   hasClass  MyClass      In addition  jQuery provides a shortcut for adding a class if it doesn t apply  or removing a class that does      MyElement   toggleClass  MyClass          Assigning a function to a click event with jQuery      MyElement   click changeClass    or  without needing an id      button contains My Button    click changeClass

User · Answer

OK  I think in this case you should use jQuery or write your own Methods in pure javascript  my preference is adding my own methods rather than injecting all jQuery to my application if I don t need that for other reasons   I d like to do something like below as methods to my javascript framework to add few functionalities which handle adding classes  deleting classes  etc similar to jQuery  this is fully supported in IE9   also my code is written in ES6  so you need to make sure your browser support it or you using something like babel  otherwise need to use ES5 syntax in your code  also in this way  we finding element via ID  which means the element needs to have an ID to be selected     simple javascript utils for class management in ES6 var classUtil        addClass   id  cl    gt        document getElementById id  classList add cl           removeClass   id  cl    gt        document getElementById id  classList remove cl           hasClass   id  cl    gt        return document getElementById id  classList contains cl           toggleClass   id  cl    gt        document getElementById id  classList toggle cl            and you can simply call use them as below  imagine your element has id of  id  and class of  class   make sure you pass them as a string  you can use the util as below   classUtil addClass  myId    myClass    classUtil removeClass  myId    myClass    classUtil hasClass  myId    myClass    classUtil toggleClass  myId    myClass

User · Answer

This is easiest with a library like jQuery    lt input type  button  onClick  javascript test byid     value  id  second     gt    lt script gt  function test byid             second   toggleClass  highlight       lt  script gt

User · Answer

THE OPTIONS  Here is a little style vs  classList examples to get you to see what are the options you have available and how to use classList to do what you want  style vs  classList The difference between style and classList is that with style you re adding to the style properties of the element  but classList is kinda controlling the class es  of the element  add  remove  toggle  contain   I will show you how to use the add and remove method since those are the popular ones   Style Example If you want to add margin-top  property into an element  you would do in such     Get the Element const el   document querySelector   element        Add CSS property  el style margintop    quot 0px quot  el style margintop    quot 25px quot     This would add a 25px to the top of the element    classList Example Let say we have a  lt div class  quot class-a class-b quot  gt   in this case  we have 2 classes added to our div element already  class-a and class-b  and we want to control what classes remove and what class to add  This is where classList becomes handy  Remove class-b    Get the Element const el   document querySelector   element        Remove class-b style from the element el classList remove  quot class-b quot     Add class-c    Get the Element const el   document querySelector   element        Add class-b style from the element el classList add  quot class-c quot

User · Answer

I use the following vanilla JavaScript functions in my code  They use regular expressions and indexOf but do not require quoting special characters in regular expressions   function addClass el  cn        var c0          el className        replace   s  g                c1          cn        replace   s  g            if  c0 indexOf c1   lt  0            el className    c0   c1  replace   s  g       replace        g                function delClass el  cn        var c0          el className        replace   s  g                c1          cn        replace   s  g            if  c0 indexOf c1   gt   0            el className   c0 replace c1       replace   s  g       replace        g                 You can also use element classList in modern browsers

User · Answer

This is working for me   function setCSS eleID        var currTabElem   document getElementById eleID        currTabElem setAttribute  class    some class name        currTabElem setAttribute  className    some class name

User · Answer

Just thought I d throw this in   function inArray val  ary     for var i 0 l ary length  i lt l  i         if ary i      val         return true              return false    function removeClassName classNameS  fromElement     var x   classNameS split   s    s   fromElement className split   s    r         for var i 0 l s length  i lt l  i         if  iA s i   x  r push s i          fromElement className   r join         function addClassName classNameS  toElement     var s   toElement className split   s      s push c   toElement className   s join

User · Answer

This is easiest with a library like jQuery    lt input type  button  onClick  javascript test byid     value  id  second     gt    lt script gt  function test byid             second   toggleClass  highlight       lt  script gt

User · Answer

Lots of answers  lots of good answers      TL DR     document getElementById  id   className    class    OR  document getElementById  id   classList add  class    document getElementById  id   classList remove  class      That s it   And  if you really want to know the why and educate yourself then I suggest reading Peter Boughton s answer  it s perfect   Note  This is possible with  document or event     getElementById   getElementsByClassName   querySelector   querySelectorAll

User · Answer

Change an element s CSS class with JavaScript in ASP NET   Protected Sub Page Load ByVal sender As Object  ByVal e As System EventArgs  Handles Me Load     If Not Page IsPostBack Then         lbSave Attributes Add  onmouseover    this className    LinkButtonStyle1            lbSave Attributes Add  onmouseout    this className    LinkButtonStyle            lbCancel Attributes Add  onmouseover    this className    LinkButtonStyle1            lbCancel Attributes Add  onmouseout    this className    LinkButtonStyle        End If End Sub

User · Answer

Wow  surprised there are so many overkill answers here      lt div class  firstClass  onclick  this className  secondClass   gt

User · Answer

Wow  surprised there are so many overkill answers here      lt div class  firstClass  onclick  this className  secondClass   gt

User · Answer

Just to add on information from another popular framework  Google Closures  see their dom classes class   goog dom classes add element  var args   goog dom classes addRemove element  classesToRemove  classesToAdd   goog dom classes remove element  var args    One option for selecting the element is using goog dom query with a CSS3 selector   var myElement   goog dom query   MyElement   0

User · Answer

just say myElement classList  new-class  unless you need to maintain other existing classes in which case you can use the classList add   remove methods    x000D   x000D  var doc   document  x000D  var divOne   doc getElementById  one    x000D  var goButton   doc getElementById  go    x000D   x000D  goButton addEventListener  click   function     x000D    divOne classList  blue   x000D      x000D  div  x000D    min-height 48px  x000D    min-width 48px  x000D    x000D   bordered  x000D    border  1px solid black  x000D    x000D   green  x000D    background green  x000D    x000D   blue  x000D    background  blue  x000D    x000D   lt button id  go  gt Change Class lt  button gt  x000D   x000D   lt div id  one  class  bordered green  gt  x000D   x000D   lt  div gt  x000D   x000D   x000D

User · Answer

function classed el  class name  add class      const re   new RegExp         s     class name         S     g      if  add class  amp  amp   el className match re   el className          class name   else if   add class  el className   el className replace re           using the accepted answer above here is a simple cross-browser function to add and remove class  add class   classed document getElementById  denis     active   true    remove class   classed document getElementById  denis     active   false

User · Answer

Here s my version  fully working   function addHTMLClass item  classname        var obj   item     if  typeof item   string             obj   document getElementById item            obj className          classname    function removeHTMLClass item  classname        var obj   item     if  typeof item   string             obj   document getElementById item            var classes      obj className     while  classes indexOf classname  gt -1            classes   classes replace  classname                obj className   classes     Usage    lt tr onmouseover  addHTMLClass this  clsSelected    onmouseout  removeHTMLClass this  clsSelected     gt

User · Answer

Here is simple jQuery code to do that       class1   click function argument            parentclass   removeClass  classtoremove        setTimeout function  argument                parentclass   addClass  classtoadd           100         Here    Class1 is a listener for an event  The parent class is the class which hosts the class you want to change Classtoremove is the old class you have  Class to add is the new class that you want to add  100 is the timeout delay during which the class is changed    Good Luck

User · Answer

Yes there is many ways to do this  In ES6 syntax we can achieve easily   Use this code toggle add and remove class    x000D   x000D  const tabs document querySelectorAll   menu li    x000D   x000D  for let tab of tabs   x000D     x000D    tab onclick function    x000D       x000D    let activetab document querySelectorAll  li active    x000D       x000D    activetab 0  classList remove  active   x000D     x000D      tab classList add  active     x000D      x000D     x000D    x000D  body   x000D      padding 20px  x000D      font-family sans-serif      x000D    x000D   x000D  ul   x000D      margin 20px 0  x000D      list-style none  x000D    x000D   x000D  li   x000D      background  dfdfdf  x000D      padding 10px  x000D      margin 6px 0  x000D      cursor pointer  x000D    x000D   x000D  li active   x000D      background  2794c7  x000D      font-weight bold  x000D      color  ffffff  x000D    x000D   lt i gt Please click an item  lt  i gt  x000D   x000D   lt ul class  menu  gt  x000D     lt li class  active  gt  lt span gt Three lt  span gt  lt  li gt  x000D     lt li gt  lt span gt Two lt  span gt  lt  li gt  x000D     lt li gt  lt span gt One lt  span gt  lt  li gt  x000D   lt  ul gt  x000D   x000D   x000D

User · Answer

There is a property className in javascript to change the name of the class of an HTML element  The existing class value will be replaced with the new one  that you have assigned in className    lt  DOCTYPE html gt   lt html gt   lt head gt   lt title gt How to change class of an HTML element in Javascript  lt  title gt   lt link rel  stylesheet  href  https   cdnjs cloudflare com ajax libs font-awesome 4 7 0 css font-awesome min css  gt   lt  head gt   lt body gt   lt h1 align  center  gt  lt i class  fa fa-home  id  icon  gt  lt  i gt  lt  h1 gt  lt br   gt    lt center gt  lt button id  change-class  gt Change Class lt  button gt  lt  center gt    lt script gt  var change class document getElementById  change-class    change class onclick function         var icon document getElementById  icon        icon className  fa fa-gear       lt  script gt   lt  body gt   lt  html gt    Credit - https   jaischool com javascript-lang how-to-change-class-name-of-an-html-element-in-javascript html

User · Answer

Working JavaScript code    lt div id  div add  class  div add  gt Add class from Javascript lt  div gt   lt div id  div replace  class  div replace  gt Replace class from Javascript lt  div gt   lt div id  div remove  class  div remove  gt Remove class from Javascript lt  div gt   lt button onClick  div add class     gt Add class from Javascript lt  button gt   lt button onClick  div replace class     gt Replace class from Javascript lt  button gt   lt button onClick  div remove class     gt Remove class from Javascript lt  button gt   lt script type  text javascript  gt      function div add class                 document getElementById  div add   className      div added             function div replace class                 document getElementById  div replace   className    div replaced             function div remove class                 document getElementById  div remove   className              lt  script gt    You can download a working code from this link

User · Answer

A couple of minor notes and tweaks on the previous regexes   You ll want to do it globally in case the class list has the class name more than once  And  you ll probably want to strip spaces from the ends of the class list and convert multiple spaces to one space to keep from getting runs of spaces  None of these things should be a problem if the only code dinking with the class names uses the regex below and removes a name before adding it  But  Well  who knows who might be dinking with the class name list   This regex is case insensitive so that bugs in class names may show up before the code is used on a browser that doesn t care about case in class names   var s    testing   one   four  one  two   var cls    one   var rg            new RegExp       s      cls       s        ig    alert       s replace rg               var cls    test   var rg            new RegExp       s      cls       s        ig    alert       s replace rg               var cls    testing   var rg            new RegExp       s      cls       s        ig    alert       s replace rg               var cls    tWo   var rg            new RegExp       s      cls       s        ig    alert       s replace rg

User · Answer

Change an element s class in vanilla JavaScript with IE6 support  You may try to use node attributes property to keep compatibility with old browsers even IE6    x000D   x000D  function getClassNode element    x000D    for  var i   element attributes length  i--   x000D      if  element attributes i  nodeName      class   x000D        return element attributes i   x000D    x000D   x000D  function removeClass classNode  className    x000D    var index  classList   classNode value split       x000D    if   index   classList indexOf className    gt  -1    x000D      classList splice index  1   x000D      classNode value   classList join       x000D      x000D    x000D   x000D  function hasClass classNode  className    x000D    return classNode value indexOf className   gt  -1  x000D    x000D   x000D  function addClass classNode  className    x000D    if   hasClass classNode  className   x000D      classNode value          className  x000D    x000D   x000D  document getElementById  message   addEventListener  click   function     x000D    var classNode   getClassNode this   x000D    var className   hasClass classNode   red    amp  amp   blue      red   x000D   x000D    removeClass classNode   red    x000D    removeClass classNode   blue    x000D   x000D    addClass classNode  className   x000D     x000D   red   x000D    color  red  x000D    x000D   red before   x000D    content   I am red     x000D    x000D   red after   x000D    content    again   x000D    x000D   blue   x000D    color  blue  x000D    x000D   blue before   x000D    content   I am blue    x000D    x000D   lt span id  message  class    gt Click me lt  span gt  x000D   x000D   x000D

User · Answer

You could also just do   document getElementById  id   classList add  class    document getElementById  id   classList remove  class      And to toggle a class  remove if exists else add it    document getElementById  id   classList toggle  class

User · Answer

In one of my old projects that did not use jQuery  I built the following functions for adding  removing and checking if element has class   function hasClass ele  cls        return ele className match new RegExp     s       cls       s          function addClass ele  cls        if   hasClass ele  cls   ele className          cls    function removeClass ele  cls        if  hasClass ele  cls             var reg   new RegExp     s       cls       s               ele className   ele className replace reg                  So  for example  if I want onclick to add some class to the button I can use this    lt script type  text javascript  gt      function changeClass btn  cls            if  hasClass btn  cls                 addClass btn  cls                    lt  script gt       lt button onclick  changeClass this   someClass    gt My Button lt  button gt    By now for sure it would just be better to use jQuery

User · Answer

Using pure JavaScript code   function hasClass ele  cls        return ele className match new RegExp     s       cls       s           function addClass ele  cls        if   this hasClass ele  cls   ele className          cls     function removeClass ele  cls        if  hasClass ele  cls             var reg   new RegExp     s       cls       s               ele className   ele className replace reg                 function replaceClass ele  oldClass  newClass       if hasClass ele  oldClass            removeClass ele  oldClass           addClass ele  newClass             return     function toggleClass ele  cls1  cls2       if hasClass ele  cls1            replaceClass ele  cls1  cls2        else if hasClass ele  cls2            replaceClass ele  cls2  cls1        else          addClass ele  cls1

User · Answer

Lots of answers  lots of good answers      TL DR     document getElementById  id   className    class    OR  document getElementById  id   classList add  class    document getElementById  id   classList remove  class      That s it   And  if you really want to know the why and educate yourself then I suggest reading Peter Boughton s answer  it s perfect   Note  This is possible with  document or event     getElementById   getElementsByClassName   querySelector   querySelectorAll

User · Answer

As well you could extend HTMLElement object  in order to add methods to add  remove  toggle and check classes  gist    HTMLElement   typeof HTMLElement      undefiend    HTMLElement   Element   HTMLElement prototype addClass   function string      if    string instanceof Array         string   string split             for var i   0  len   string length  i  lt  len    i        if  string i   amp  amp   new RegExp     s        string i        s       test this className           this className   this className trim           string i                HTMLElement prototype removeClass   function string      if    string instanceof Array         string   string split             for var i   0  len   string length  i  lt  len    i        this className   this className replace new RegExp     s        string i        s             trim           HTMLElement prototype toggleClass   function string      if  string        if  new RegExp     s        string       s       test this className           this className   this className replace new RegExp     s        string       s             trim          else         this className   this className trim           string               HTMLElement prototype hasClass   function string      return string  amp  amp  new RegExp     s        string       s       test this className       And then just use like this  on click will add or remove class    document getElementById  yourElementId   onclick   function       this toggleClass  active        Here is demo

User · Answer

try  element className  second     x000D   x000D  function change box    box className  second    x000D   first    width   70px  height   70px  background   ff0                   x000D   second   width  150px  height  150px  background   f00  transition  1s   x000D   lt div onclick  change this   class  first  gt Click me lt  div gt  x000D   x000D   x000D

User · Answer

Here s my version  fully working   function addHTMLClass item  classname        var obj   item     if  typeof item   string             obj   document getElementById item            obj className          classname    function removeHTMLClass item  classname        var obj   item     if  typeof item   string             obj   document getElementById item            var classes      obj className     while  classes indexOf classname  gt -1            classes   classes replace  classname                obj className   classes     Usage    lt tr onmouseover  addHTMLClass this  clsSelected    onmouseout  removeHTMLClass this  clsSelected     gt

User · Answer

As well you could extend HTMLElement object  in order to add methods to add  remove  toggle and check classes  gist    HTMLElement   typeof HTMLElement      undefiend    HTMLElement   Element   HTMLElement prototype addClass   function string      if    string instanceof Array         string   string split             for var i   0  len   string length  i  lt  len    i        if  string i   amp  amp   new RegExp     s        string i        s       test this className           this className   this className trim           string i                HTMLElement prototype removeClass   function string      if    string instanceof Array         string   string split             for var i   0  len   string length  i  lt  len    i        this className   this className replace new RegExp     s        string i        s             trim           HTMLElement prototype toggleClass   function string      if  string        if  new RegExp     s        string       s       test this className           this className   this className replace new RegExp     s        string       s             trim          else         this className   this className trim           string               HTMLElement prototype hasClass   function string      return string  amp  amp  new RegExp     s        string       s       test this className       And then just use like this  on click will add or remove class    document getElementById  yourElementId   onclick   function       this toggleClass  active        Here is demo

User · Answer

The line  document getElementById  MyElement   className   document getElementById  MyElement   className replace   bMyClass b         should be   document getElementById  MyElement   className   document getElementById  MyElement   className replace    bMyClass b

User · Answer

Just thought I d throw this in   function inArray val  ary     for var i 0 l ary length  i lt l  i         if ary i      val         return true              return false    function removeClassName classNameS  fromElement     var x   classNameS split   s    s   fromElement className split   s    r         for var i 0 l s length  i lt l  i         if  iA s i   x  r push s i          fromElement className   r join         function addClassName classNameS  toElement     var s   toElement className split   s      s push c   toElement className   s join

User · Answer

Here s a toggleClass to toggle add remove a class on an element      If newState is provided add remove theClass accordingly  otherwise toggle theClass function toggleClass elem  theClass  newState        var matchRegExp   new RegExp         s     theClass         S     g        var add  arguments length gt 2   newState    elem className match matchRegExp     null         elem className elem className replace matchRegExp          clear all     if  add  elem className          theClass      see jsfiddle  also see my answer here for creating a new class dynamically

User · Answer

THE OPTIONS  Here is a little style vs  classList examples to get you to see what are the options you have available and how to use classList to do what you want  style vs  classList The difference between style and classList is that with style you re adding to the style properties of the element  but classList is kinda controlling the class es  of the element  add  remove  toggle  contain   I will show you how to use the add and remove method since those are the popular ones   Style Example If you want to add margin-top  property into an element  you would do in such     Get the Element const el   document querySelector   element        Add CSS property  el style margintop    quot 0px quot  el style margintop    quot 25px quot     This would add a 25px to the top of the element    classList Example Let say we have a  lt div class  quot class-a class-b quot  gt   in this case  we have 2 classes added to our div element already  class-a and class-b  and we want to control what classes remove and what class to add  This is where classList becomes handy  Remove class-b    Get the Element const el   document querySelector   element        Remove class-b style from the element el classList remove  quot class-b quot     Add class-c    Get the Element const el   document querySelector   element        Add class-b style from the element el classList add  quot class-c quot

User · Answer

You could also just do   document getElementById  id   classList add  class    document getElementById  id   classList remove  class      And to toggle a class  remove if exists else add it    document getElementById  id   classList toggle  class

User · Answer

OK  I think in this case you should use jQuery or write your own Methods in pure javascript  my preference is adding my own methods rather than injecting all jQuery to my application if I don t need that for other reasons   I d like to do something like below as methods to my javascript framework to add few functionalities which handle adding classes  deleting classes  etc similar to jQuery  this is fully supported in IE9   also my code is written in ES6  so you need to make sure your browser support it or you using something like babel  otherwise need to use ES5 syntax in your code  also in this way  we finding element via ID  which means the element needs to have an ID to be selected     simple javascript utils for class management in ES6 var classUtil        addClass   id  cl    gt        document getElementById id  classList add cl           removeClass   id  cl    gt        document getElementById id  classList remove cl           hasClass   id  cl    gt        return document getElementById id  classList contains cl           toggleClass   id  cl    gt        document getElementById id  classList toggle cl            and you can simply call use them as below  imagine your element has id of  id  and class of  class   make sure you pass them as a string  you can use the util as below   classUtil addClass  myId    myClass    classUtil removeClass  myId    myClass    classUtil hasClass  myId    myClass    classUtil toggleClass  myId    myClass

User · Answer

Modern HTML5 Techniques for changing classes Modern browsers have added classList which provides methods to make it easier to manipulate classes without needing a library  document getElementById  quot MyElement quot   classList add  MyClass     document getElementById  quot MyElement quot   classList remove  MyClass     if   document getElementById  quot MyElement quot   classList contains  MyClass      document getElementById  quot MyElement quot   classList toggle  MyClass     Unfortunately  these do not work in Internet Explorer prior to v10  though there is a shim to add support for it to IE8 and IE9  available from this page  It is  though  getting more and more supported  Simple cross-browser solution The standard JavaScript way to select an element is using document getElementById  quot Id quot    which is what the following examples use - you can of course obtain elements in other ways  and in the right situation may simply use this instead - however  going into detail on this is beyond the scope of the answer  To change all classes for an element  To replace all existing classes with one or more new classes  set the className attribute  document getElementById  quot MyElement quot   className    quot MyClass quot     You can use a space-delimited list to apply multiple classes   To add an additional class to an element  To add a class to an element  without removing affecting existing values  append a space and the new classname  like so  document getElementById  quot MyElement quot   className     quot  MyClass quot    To remove a class from an element  To remove a single class to an element  without affecting other potential classes  a simple regex replace is required  document getElementById  quot MyElement quot   className      document getElementById  quot MyElement quot   className replace                s MyClass    S  g           Code wrapped for readability - above is all one statement     An explanation of this regex is as follows        s    Match the start of the string or any single whitespace character  MyClass    The literal text for the classname to remove      S      Negative lookahead to verify the above is the whole classname            Ensures there is no non-space character following             i e  must be the end of the string or space   The g flag tells the replace to repeat as required  in case the class name has been added multiple times  To check if a class is already applied to an element  The same regex used above for removing a class can also be used as a check as to whether a particular class exists  if   document getElementById  quot MyElement quot   className match        s MyClass    S            Assigning these actions to onclick events  Whilst it is possible to write JavaScript directly inside the HTML event attributes  such as onclick  quot this className    MyClass  quot   this is not recommended behaviour  Especially on larger applications  more maintainable code is achieved by separating HTML markup from JavaScript interaction logic  The first step to achieving this is by creating a function  and calling the function in the onclick attribute  for example   lt script type  quot text javascript quot  gt      function changeClass               Code examples from above        lt  script gt       lt button onclick  quot changeClass   quot  gt My Button lt  button gt    It is not required to have this code in script tags  this is simply for the brevity of example  and including the JavaScript in a distinct file may be more appropriate   The second step is to move the onclick event out of the HTML and into JavaScript  for example using addEventListener  lt script type  quot text javascript quot  gt      function changeClass               Code examples from above            window onload   function            document getElementById  quot MyElement quot   addEventListener   click   changeClass          lt  script gt       lt button id  quot MyElement quot  gt My Button lt  button gt    Note that the window onload part is required so that the contents of that function are executed after the HTML has finished loading - without this  the MyElement might not exist when the JavaScript code is called  so that line would fail    JavaScript Frameworks and Libraries The above code is all in standard JavaScript  however  it is common practice to use either a framework or a library to simplify common tasks  as well as benefit from fixed bugs and edge cases that you might not think of when writing your code  Whilst some people consider it overkill to add a  50   KB framework for simply changing a class  if you are doing any substantial amount of JavaScript work or anything that might have unusual cross-browser behavior  it is well worth considering   Very roughly  a library is a set of tools designed for a specific task  whilst a framework generally contains multiple libraries and performs a complete set of duties   The examples above have been reproduced below using jQuery  probably the most commonly used JavaScript library  though there are others worth investigating too    Note that   here is the jQuery object   Changing Classes with jQuery      MyElement   addClass  MyClass         MyElement   removeClass  MyClass     if       MyElement   hasClass  MyClass      In addition  jQuery provides a shortcut for adding a class if it doesn t apply  or removing a class that does      MyElement   toggleClass  MyClass          Assigning a function to a click event with jQuery      MyElement   click changeClass    or  without needing an id      button contains My Button    click changeClass

User · Answer

You can use node className like so   document getElementById  foo   className    bar     This should work in IE5 5 and up according to PPK

User · Answer

I would use jQuery and write something like this:

jQuery(function($) {
    $("#some-element").click(function() {
        $(this).toggleClass("clicked");
    });
});

This code adds a function to be called when an element of the id some-element is clicked. The function appends clicked to the element's class attribute if it's not already part of it, and removes it if it's there.

Yes you do need to add a reference to the jQuery library in your page to use this code, but at least you can feel confident the most functions in the library would work on pretty much all the modern browsers, and it will save you time implementing your own code to do the same.

Thanks

User · Answer

You can use node className like so   document getElementById  foo   className    bar     This should work in IE5 5 and up according to PPK

[javascript] How can I change an element's class with JavaScript?

Examples related to javascript

Examples related to html

Examples related to dom