How to add a class to a given element

Question

I have an element that already has a class   lt div class  quot someclass quot  gt       lt img     id  quot image1 quot  name  quot image1 quot    gt   lt  div gt   Now  I want to create a JavaScript function that will add a class to the div  not replace  but add   How can I do that

User · Answer

Assuming you re doing more than just adding this one class  eg  you ve got asynchronous requests and so on going on as well   I d recommend a library like Prototype or jQuery   This will make just about everything you ll need to do  including this  very simple   So let s say you ve got jQuery on your page now  you could use code like this to add a class name to an element  on load  in this case      document  ready  function           div1   addClass   some other class            Check out the jQuery API browser for other stuff

User · Answer

If you don t want to use jQuery and want to support older browsers   function addClass elem  clazz        if   elemHasClass elem  clazz             elem className          clazz           function elemHasClass elem  clazz        return new RegExp           clazz            test elem className

User · Answer

Shortest  image1 parentNode className    box      x000D   x000D  image1 parentNode className    box   x000D   box   width  100px  height 100px  background  red    x000D   lt div class  someclass  gt  x000D       lt img     id  image1  name  image1    gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Add Class   Cross Compatible  In the following example we add a classname to the  lt body gt  element   This is IE-8 compatible   var a   document body  a classList   a classList add  classname     a className      classname     This is shorthand for the following    var a   document body  if  a classList        a classList add  wait      else       a className      wait           Performance  If your more concerned with performance over cross-compatibility you can shorten it to the following which is 4  faster   var z   document body  document body classList add  wait          Convenience  Alternatively you could use jQuery but the resulting performance is significantly slower   94  slower according to jsPerf     body   addClass  wait           Removing the class   Performance  Using jQuery selectively is the best method for removing a class if your concerned with performance  var a   document body  c     classname     a  removeClass c         Without jQuery it s 32  slower  var a   document body  c     classname   a className   a className replace  c        a className   a className   c       References   jsPerf Test Case  Adding a Class jsPerf Test Case  Removing a Class     Using Prototype  Element  document body   ClassNames add  classname   Element  document body   ClassNames remove  classname   Element  document body   ClassNames set  classname     Using YUI  YAHOO util Dom hasClass document body  classname   YAHOO util Dom addClass document body  classname   YAHOO util Dom removeClass document body  classname

User · Answer

I know IE9 is shutdown officially and we can achieve it with element classList as many told above but I just tried to learn how it works without classList with help of many answers above I could learn it   Below code extends many answers above and improves them by avoiding adding duplicate classes   function addClass element className     var classArray   className split         classArray forEach function  className        if  hasClass element className          element className        className                              this will add 5 only once addClass document querySelector   getbyid    3 4 5 5 5

User · Answer

If you re only targeting modern browsers   Use element classList add to add a class   element classList add  my-class      And element classList remove to remove a class   element classList remove  my-class      If you need to support Internet Explorer 9 or lower   Add a space plus the name of your new class to the className property of the element  First  put an id on the element so you can easily get a reference    lt div id  div1  class  someclass  gt       lt img     id  image1  name  image1    gt   lt  div gt    Then   var d   document getElementById  div1    d className      otherclass     Note the space before otherclass  It s important to include the space otherwise it compromises existing classes that come before it in the class list    See also element className on MDN

User · Answer

If you re only targeting modern browsers   Use element classList add to add a class   element classList add  my-class      And element classList remove to remove a class   element classList remove  my-class      If you need to support Internet Explorer 9 or lower   Add a space plus the name of your new class to the className property of the element  First  put an id on the element so you can easily get a reference    lt div id  div1  class  someclass  gt       lt img     id  image1  name  image1    gt   lt  div gt    Then   var d   document getElementById  div1    d className      otherclass     Note the space before otherclass  It s important to include the space otherwise it compromises existing classes that come before it in the class list    See also element className on MDN

User · Answer

Shortest  image1 parentNode className    box      x000D   x000D  image1 parentNode className    box   x000D   box   width  100px  height 100px  background  red    x000D   lt div class  someclass  gt  x000D       lt img     id  image1  name  image1    gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Add Class   Cross Compatible  In the following example we add a classname to the  lt body gt  element   This is IE-8 compatible   var a   document body  a classList   a classList add  classname     a className      classname     This is shorthand for the following    var a   document body  if  a classList        a classList add  wait      else       a className      wait           Performance  If your more concerned with performance over cross-compatibility you can shorten it to the following which is 4  faster   var z   document body  document body classList add  wait          Convenience  Alternatively you could use jQuery but the resulting performance is significantly slower   94  slower according to jsPerf     body   addClass  wait           Removing the class   Performance  Using jQuery selectively is the best method for removing a class if your concerned with performance  var a   document body  c     classname     a  removeClass c         Without jQuery it s 32  slower  var a   document body  c     classname   a className   a className replace  c        a className   a className   c       References   jsPerf Test Case  Adding a Class jsPerf Test Case  Removing a Class     Using Prototype  Element  document body   ClassNames add  classname   Element  document body   ClassNames remove  classname   Element  document body   ClassNames set  classname     Using YUI  YAHOO util Dom hasClass document body  classname   YAHOO util Dom addClass document body  classname   YAHOO util Dom removeClass document body  classname

User · Answer

In YUI  if you include yuidom  you can use    YAHOO util Dom addClass  div1   className      HTH

User · Answer

If you don t want to use jQuery and want to support older browsers   function addClass elem  clazz        if   elemHasClass elem  clazz             elem className          clazz           function elemHasClass elem  clazz        return new RegExp           clazz            test elem className

User · Answer

The easiest way to do this without any framework is to use element classList add method   var element   document getElementById  div1    element classList add  otherclass      Edit  And if you want to remove class from an element -   element classList remove  otherclass      I prefer not having to add any empty space and duplicate entry handling myself  which is required when using the document className approach   There are some browser limitations  but you can work around them using polyfills

User · Answer

In YUI  if you include yuidom  you can use    YAHOO util Dom addClass  div1   className      HTH

User · Answer

first  give the div an id  Then  call function appendClass    lt script language  javascript  gt    function appendClass elementId  classToAppend       var oldClass   document getElementById elementId  getAttribute  class        if  oldClass indexOf classToAdd     -1              document getElementById elementId  setAttribute  class   classToAppend            lt  script gt

User · Answer

The easiest way to do this without any framework is to use element classList add method   var element   document getElementById  div1    element classList add  otherclass      Edit  And if you want to remove class from an element -   element classList remove  otherclass      I prefer not having to add any empty space and duplicate entry handling myself  which is required when using the document className approach   There are some browser limitations  but you can work around them using polyfills

User · Answer

In YUI  if you include yuidom  you can use    YAHOO util Dom addClass  div1   className      HTH

User · Answer

Just to elaborate on what others have said  multiple CSS classes are combined in a single string  delimited by spaces  Thus  if you wanted to hard-code it  it would simply look like this    lt div class  someClass otherClass yetAnotherClass  gt         lt img     id  image1  name  image1    gt   lt  div gt    From there you can easily derive the javascript necessary to add a new class    just append a space followed by the new class to the element s className property  Knowing this  you can also write a function to remove a class later should the need arise

User · Answer

I think it s better to use pure JavaScript  which we can run on the DOM of the Browser   Here is the functional way to use it  I have used ES6 but feel free to use ES5 and function expression or function definition  whichever suits your JavaScript StyleGuide    x000D   x000D   use strict  x000D   x000D  const oldAdd    element  className    gt    x000D    let classes   element className split      x000D    if  classes indexOf className   lt  0    x000D      classes push className  x000D      x000D    element className   classes join      x000D    x000D   x000D  const oldRemove    element  className    gt    x000D    let classes   element className split      x000D    const idx   classes indexOf className  x000D    if  idx  gt  -1    x000D      classes splice idx  1  x000D      x000D    element className   classes join      x000D    x000D   x000D  const addClass    element  className    gt    x000D    if  element classList    x000D      element classList add className  x000D      else   x000D      oldAdd element  className  x000D      x000D    x000D   x000D  const removeClass    element  className    gt    x000D    if  element classList    x000D      element classList remove className  x000D      else   x000D      oldRemove element  className  x000D      x000D    x000D   x000D   x000D

User · Answer

I too think that the fastest way is to use Element prototype classList as in es5  document querySelector   my super-class   classList add  new-class   but in ie8 there is no such thing as Element prototype classList  anyway you can polyfill it with this snippet  fell free to edit and improve it     x000D   x000D  if Element prototype classList     void 0   x000D   function DOMTokenList classes  self   x000D    typeof classes     string   amp  amp   classes   classes split       x000D    while this length   x000D     Array prototype pop apply this   x000D      x000D    Array prototype push apply this  classes   x000D    this   self     this   self      self x000D     x000D   x000D   DOMTokenList prototype item   function  index   x000D    return this index   x000D     x000D   x000D   DOMTokenList prototype contains   function  myClass   x000D    for var i   this length - 1  i  gt   0   i--   x000D     if this i      myClass   x000D      return true  x000D       x000D      x000D    return false x000D     x000D   x000D   DOMTokenList prototype add   function  newClass   x000D    if this contains newClass    x000D     return  x000D      x000D    this   self   className     this   self   className         newClass  x000D    DOMTokenList call this  this   self   className  x000D     x000D   x000D   DOMTokenList prototype remove   function  oldClass   x000D    if  this contains newClass    x000D     return  x000D      x000D    this this indexOf oldClass     undefined x000D    this   self   className   this join      replace             x000D    DOMTokenList call this  this   self   className  x000D     x000D   x000D   DOMTokenList prototype toggle   function  aClass   x000D    this this contains aClass    remove     add   aClass  x000D    return this contains aClass   x000D     x000D   x000D   DOMTokenList prototype replace   function  oldClass  newClass   x000D    this contains oldClass   amp  amp  this remove oldClass   amp  amp  this add newClass  x000D     x000D   x000D   Object defineProperty Element prototype   classList     x000D    get  function     x000D     return new DOMTokenList  this className  this    x000D       x000D    enumerable  false x000D      x000D    x000D   x000D   x000D

User · Answer

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  MyElement   className      MyClass     To change all classes for an element   To replace all existing classes with one or more new classes  set the className attribute   document getElementById  MyElement   className    MyClass      You can use a space-delimited list to apply multiple classes

User · Answer

Sample with pure JS  In first example we get our element s id and add e g  2 classes   document addEventListener  DOMContentLoaded   function         document getElementsById  tabGroup   className    anyClass1 anyClass2        In second example we get element s class name and add 1 more       document addEventListener  DOMContentLoaded   function         document getElementsByClassName  tabGroup   0  className    tabGroup ready

User · Answer

If you re only targeting modern browsers   Use element classList add to add a class   element classList add  my-class      And element classList remove to remove a class   element classList remove  my-class      If you need to support Internet Explorer 9 or lower   Add a space plus the name of your new class to the className property of the element  First  put an id on the element so you can easily get a reference    lt div id  div1  class  someclass  gt       lt img     id  image1  name  image1    gt   lt  div gt    Then   var d   document getElementById  div1    d className      otherclass     Note the space before otherclass  It s important to include the space otherwise it compromises existing classes that come before it in the class list    See also element className on MDN

User · Answer

document getElementById  some id   className     someclassname   OR  document getElementById  some id   classList add  someclassname    First approach helped in adding the class when second approach didn t work  Don t forget to keep a space in front of the   someclassname  in the first approach  For removal you can use  document getElementById  some id   classList remove  someclassname

User · Answer

first  give the div an id  Then  call function appendClass    lt script language  javascript  gt    function appendClass elementId  classToAppend       var oldClass   document getElementById elementId  getAttribute  class        if  oldClass indexOf classToAdd     -1              document getElementById elementId  setAttribute  class   classToAppend            lt  script gt

User · Answer

I too think that the fastest way is to use Element prototype classList as in es5  document querySelector   my super-class   classList add  new-class   but in ie8 there is no such thing as Element prototype classList  anyway you can polyfill it with this snippet  fell free to edit and improve it     x000D   x000D  if Element prototype classList     void 0   x000D   function DOMTokenList classes  self   x000D    typeof classes     string   amp  amp   classes   classes split       x000D    while this length   x000D     Array prototype pop apply this   x000D      x000D    Array prototype push apply this  classes   x000D    this   self     this   self      self x000D     x000D   x000D   DOMTokenList prototype item   function  index   x000D    return this index   x000D     x000D   x000D   DOMTokenList prototype contains   function  myClass   x000D    for var i   this length - 1  i  gt   0   i--   x000D     if this i      myClass   x000D      return true  x000D       x000D      x000D    return false x000D     x000D   x000D   DOMTokenList prototype add   function  newClass   x000D    if this contains newClass    x000D     return  x000D      x000D    this   self   className     this   self   className         newClass  x000D    DOMTokenList call this  this   self   className  x000D     x000D   x000D   DOMTokenList prototype remove   function  oldClass   x000D    if  this contains newClass    x000D     return  x000D      x000D    this this indexOf oldClass     undefined x000D    this   self   className   this join      replace             x000D    DOMTokenList call this  this   self   className  x000D     x000D   x000D   DOMTokenList prototype toggle   function  aClass   x000D    this this contains aClass    remove     add   aClass  x000D    return this contains aClass   x000D     x000D   x000D   DOMTokenList prototype replace   function  oldClass  newClass   x000D    this contains oldClass   amp  amp  this remove oldClass   amp  amp  this add newClass  x000D     x000D   x000D   Object defineProperty Element prototype   classList     x000D    get  function     x000D     return new DOMTokenList  this className  this    x000D       x000D    enumerable  false x000D      x000D    x000D   x000D   x000D

User · Answer

When the work I m doing doesn t warrant using a library  I use these two functions   function addClass  classname  element         var cn   element className        test for existance     if  cn indexOf  classname      -1             return              add a space if the element already has class     if  cn                   classname       classname            element className   cn classname     function removeClass  classname  element         var cn   element className      var rxp   new RegExp     s   b  classname    b    g         cn   cn replace  rxp            element className   cn

User · Answer

You can use modern approach similar to jQuery  If you need to change only one element  first one that JS will find in DOM  you can use this     x000D   x000D  document querySelector   someclass   className      red   x000D   red   x000D    color  red  x000D    x000D   lt div class  someclass  gt  x000D     lt p gt This method will add class  red  only to first element in DOM lt  p gt  x000D   lt  div gt  x000D   x000D   lt div class  someclass  gt  x000D     lt p gt lorem ipsum lt  p gt  x000D   lt  div gt  x000D   x000D   lt div class  someclass  gt  x000D     lt p gt lorem ipsum lt  p gt  x000D   lt  div gt  x000D   x000D   lt div class  someclass  gt  x000D     lt p gt lorem ipsum lt  p gt  x000D   lt  div gt  x000D   x000D   x000D    Keep in mind to leave one space before class name   If you have multiple classes where you want to add new class  you can use it like this   x000D   x000D  document querySelectorAll   someclass   forEach function element    x000D    element className      red   x000D      x000D   red   x000D    color  red  x000D    x000D   lt div class  someclass  gt  x000D     lt p gt This method will add class  red  to all elements in DOM that have  someclass  class  lt  p gt  x000D   lt  div gt  x000D   x000D   lt div class  someclass  gt  x000D     lt p gt lorem ipsum lt  p gt  x000D   lt  div gt  x000D   x000D   lt div class  someclass  gt  x000D     lt p gt lorem ipsum lt  p gt  x000D   lt  div gt  x000D   x000D   lt div class  someclass  gt  x000D     lt p gt lorem ipsum lt  p gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

find your target element  d  however you wish and then   d className      additionalClass     note the space   you can wrap that in cleverer ways to check pre-existence  and check for space requirements etc

User · Answer

You can use modern approach similar to jQuery  If you need to change only one element  first one that JS will find in DOM  you can use this     x000D   x000D  document querySelector   someclass   className      red   x000D   red   x000D    color  red  x000D    x000D   lt div class  someclass  gt  x000D     lt p gt This method will add class  red  only to first element in DOM lt  p gt  x000D   lt  div gt  x000D   x000D   lt div class  someclass  gt  x000D     lt p gt lorem ipsum lt  p gt  x000D   lt  div gt  x000D   x000D   lt div class  someclass  gt  x000D     lt p gt lorem ipsum lt  p gt  x000D   lt  div gt  x000D   x000D   lt div class  someclass  gt  x000D     lt p gt lorem ipsum lt  p gt  x000D   lt  div gt  x000D   x000D   x000D    Keep in mind to leave one space before class name   If you have multiple classes where you want to add new class  you can use it like this   x000D   x000D  document querySelectorAll   someclass   forEach function element    x000D    element className      red   x000D      x000D   red   x000D    color  red  x000D    x000D   lt div class  someclass  gt  x000D     lt p gt This method will add class  red  to all elements in DOM that have  someclass  class  lt  p gt  x000D   lt  div gt  x000D   x000D   lt div class  someclass  gt  x000D     lt p gt lorem ipsum lt  p gt  x000D   lt  div gt  x000D   x000D   lt div class  someclass  gt  x000D     lt p gt lorem ipsum lt  p gt  x000D   lt  div gt  x000D   x000D   lt div class  someclass  gt  x000D     lt p gt lorem ipsum lt  p gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

You can use the classList add OR classList remove method to add remove a class from a element   var nameElem   document getElementById  name   nameElem classList add  anyclss     The above code will add and NOT replace  a class  anyclass  to nameElem  Similarly you can use classList remove   method to remove a class   nameElem classList remove  anyclss

User · Answer

I think it s better to use pure JavaScript  which we can run on the DOM of the Browser   Here is the functional way to use it  I have used ES6 but feel free to use ES5 and function expression or function definition  whichever suits your JavaScript StyleGuide    x000D   x000D   use strict  x000D   x000D  const oldAdd    element  className    gt    x000D    let classes   element className split      x000D    if  classes indexOf className   lt  0    x000D      classes push className  x000D      x000D    element className   classes join      x000D    x000D   x000D  const oldRemove    element  className    gt    x000D    let classes   element className split      x000D    const idx   classes indexOf className  x000D    if  idx  gt  -1    x000D      classes splice idx  1  x000D      x000D    element className   classes join      x000D    x000D   x000D  const addClass    element  className    gt    x000D    if  element classList    x000D      element classList add className  x000D      else   x000D      oldAdd element  className  x000D      x000D    x000D   x000D  const removeClass    element  className    gt    x000D    if  element classList    x000D      element classList remove className  x000D      else   x000D      oldRemove element  className  x000D      x000D    x000D   x000D   x000D

User · Answer

find your target element  d  however you wish and then   d className      additionalClass     note the space   you can wrap that in cleverer ways to check pre-existence  and check for space requirements etc

User · Answer

I know IE9 is shutdown officially and we can achieve it with element classList as many told above but I just tried to learn how it works without classList with help of many answers above I could learn it   Below code extends many answers above and improves them by avoiding adding duplicate classes   function addClass element className     var classArray   className split         classArray forEach function  className        if  hasClass element className          element className        className                              this will add 5 only once addClass document querySelector   getbyid    3 4 5 5 5

User · Answer

When the work I m doing doesn t warrant using a library  I use these two functions   function addClass  classname  element         var cn   element className        test for existance     if  cn indexOf  classname      -1             return              add a space if the element already has class     if  cn                   classname       classname            element className   cn classname     function removeClass  classname  element         var cn   element className      var rxp   new RegExp     s   b  classname    b    g         cn   cn replace  rxp            element className   cn

User · Answer

You can use the API querySelector to select your element and then create a function with the element and the new classname as parameters  Using classlist for modern browsers  else for IE8  Then you can call the function after an event       select the dom element  var addClassVar   document querySelector   someclass        define the addclass function  var addClass   function el className      if  el classList        el classList add className           else        el className          className            call the function addClass addClassVar   newClass

User · Answer

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  MyElement   className      MyClass     To change all classes for an element   To replace all existing classes with one or more new classes  set the className attribute   document getElementById  MyElement   className    MyClass      You can use a space-delimited list to apply multiple classes

User · Answer

Just to elaborate on what others have said  multiple CSS classes are combined in a single string  delimited by spaces  Thus  if you wanted to hard-code it  it would simply look like this    lt div class  someClass otherClass yetAnotherClass  gt         lt img     id  image1  name  image1    gt   lt  div gt    From there you can easily derive the javascript necessary to add a new class    just append a space followed by the new class to the element s className property  Knowing this  you can also write a function to remove a class later should the need arise

User · Answer

This js code works for me  provides classname replacement  var DDCdiv   hEle getElementBy       var cssCNs   DDCdiv getAttribute  class    var Ta   cssCNs split         split into an array for  var i 0  i lt  Ta length i          if  Ta i      visible            Ta i     hidden           break    quit for loop           else if  Ta i      hidden            Ta i     visible       break    quit for loop         DDCdiv setAttribute  class  Ta join             Join array with space and set class name   To add just use  var cssCNs   DDCdiv getAttribute  class    var Ta   cssCNs split         split into an array Ta push  New class name       Ta push  Another class name     etc    DDCdiv setAttribute  class  Ta join             Join array with space and set class name   To remove use  var cssCNs   DDCdiv getAttribute  class    var Ta   cssCNs split         split into an array  for  var i 0  i lt  Ta length i          if  Ta i      visible            Ta splice  i  1            break    quit for loop         DDCdiv setAttribute  class  Ta join             Join array with space and set class name   Hope this is helpful to sombody

User · Answer

Just to elaborate on what others have said  multiple CSS classes are combined in a single string  delimited by spaces  Thus  if you wanted to hard-code it  it would simply look like this    lt div class  someClass otherClass yetAnotherClass  gt         lt img     id  image1  name  image1    gt   lt  div gt    From there you can easily derive the javascript necessary to add a new class    just append a space followed by the new class to the element s className property  Knowing this  you can also write a function to remove a class later should the need arise

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

User · Answer

Sample with pure JS  In first example we get our element s id and add e g  2 classes   document addEventListener  DOMContentLoaded   function         document getElementsById  tabGroup   className    anyClass1 anyClass2        In second example we get element s class name and add 1 more       document addEventListener  DOMContentLoaded   function         document getElementsByClassName  tabGroup   0  className    tabGroup ready

User · Answer

Assuming you re doing more than just adding this one class  eg  you ve got asynchronous requests and so on going on as well   I d recommend a library like Prototype or jQuery   This will make just about everything you ll need to do  including this  very simple   So let s say you ve got jQuery on your page now  you could use code like this to add a class name to an element  on load  in this case      document  ready  function           div1   addClass   some other class            Check out the jQuery API browser for other stuff

User · Answer

In my case  I had more than one class called main-wrapper in the DOM  but I only wanted to affect the parent main-wrapper  Using  first Selector  https   api jquery com first-selector    I could select the first matched DOM element  This was the solution for me    document  ready  function             main-wrapper first   addClass  homepage-redesign            deals-index  gt  div eq 0   gt  div eq 1    addClass  doubleheaderredesign          I also did the same thing for the second children of a specific div in my DOM as you can see in the code where I used     deals-index  gt  div eq 0   gt  div eq 1    addClass  doubleheaderredesign     NOTE  I used jQuery as you can see

User · Answer

In YUI  if you include yuidom  you can use    YAHOO util Dom addClass  div1   className      HTH

User · Answer

first  give the div an id  Then  call function appendClass    lt script language  javascript  gt    function appendClass elementId  classToAppend       var oldClass   document getElementById elementId  getAttribute  class        if  oldClass indexOf classToAdd     -1              document getElementById elementId  setAttribute  class   classToAppend            lt  script gt

User · Answer

document getElementById  some id   className     someclassname   OR  document getElementById  some id   classList add  someclassname    First approach helped in adding the class when second approach didn t work  Don t forget to keep a space in front of the   someclassname  in the first approach  For removal you can use  document getElementById  some id   classList remove  someclassname

User · Answer

You can use the API querySelector to select your element and then create a function with the element and the new classname as parameters  Using classlist for modern browsers  else for IE8  Then you can call the function after an event       select the dom element  var addClassVar   document querySelector   someclass        define the addclass function  var addClass   function el className      if  el classList        el classList add className           else        el className          className            call the function addClass addClassVar   newClass

User · Answer

find your target element  d  however you wish and then   d className      additionalClass     note the space   you can wrap that in cleverer ways to check pre-existence  and check for space requirements etc

User · Answer

When the work I m doing doesn t warrant using a library  I use these two functions   function addClass  classname  element         var cn   element className        test for existance     if  cn indexOf  classname      -1             return              add a space if the element already has class     if  cn                   classname       classname            element className   cn classname     function removeClass  classname  element         var cn   element className      var rxp   new RegExp     s   b  classname    b    g         cn   cn replace  rxp            element className   cn

User · Answer

For those using Lodash and wanting to update className string      get element reference var elem   document getElementById  myElement        add some classes  Eg   nav  and  nav header  elem className     chain elem className  split    s     union   nav   navHeader    join      value       remove the added classes elem className     chain elem className  split    s     difference   nav   navHeader    join      value

User · Answer

If you re only targeting modern browsers   Use element classList add to add a class   element classList add  my-class      And element classList remove to remove a class   element classList remove  my-class      If you need to support Internet Explorer 9 or lower   Add a space plus the name of your new class to the className property of the element  First  put an id on the element so you can easily get a reference    lt div id  div1  class  someclass  gt       lt img     id  image1  name  image1    gt   lt  div gt    Then   var d   document getElementById  div1    d className      otherclass     Note the space before otherclass  It s important to include the space otherwise it compromises existing classes that come before it in the class list    See also element className on MDN

User · Answer

When the work I m doing doesn t warrant using a library  I use these two functions   function addClass  classname  element         var cn   element className        test for existance     if  cn indexOf  classname      -1             return              add a space if the element already has class     if  cn                   classname       classname            element className   cn classname     function removeClass  classname  element         var cn   element className      var rxp   new RegExp     s   b  classname    b    g         cn   cn replace  rxp            element className   cn

User · Answer

This js code works for me  provides classname replacement  var DDCdiv   hEle getElementBy       var cssCNs   DDCdiv getAttribute  class    var Ta   cssCNs split         split into an array for  var i 0  i lt  Ta length i          if  Ta i      visible            Ta i     hidden           break    quit for loop           else if  Ta i      hidden            Ta i     visible       break    quit for loop         DDCdiv setAttribute  class  Ta join             Join array with space and set class name   To add just use  var cssCNs   DDCdiv getAttribute  class    var Ta   cssCNs split         split into an array Ta push  New class name       Ta push  Another class name     etc    DDCdiv setAttribute  class  Ta join             Join array with space and set class name   To remove use  var cssCNs   DDCdiv getAttribute  class    var Ta   cssCNs split         split into an array  for  var i 0  i lt  Ta length i          if  Ta i      visible            Ta splice  i  1            break    quit for loop         DDCdiv setAttribute  class  Ta join             Join array with space and set class name   Hope this is helpful to sombody

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

User · Answer

find your target element  d  however you wish and then   d className      additionalClass     note the space   you can wrap that in cleverer ways to check pre-existence  and check for space requirements etc

User · Answer

Just to elaborate on what others have said  multiple CSS classes are combined in a single string  delimited by spaces  Thus  if you wanted to hard-code it  it would simply look like this    lt div class  someClass otherClass yetAnotherClass  gt         lt img     id  image1  name  image1    gt   lt  div gt    From there you can easily derive the javascript necessary to add a new class    just append a space followed by the new class to the element s className property  Knowing this  you can also write a function to remove a class later should the need arise

User · Answer

Assuming you re doing more than just adding this one class  eg  you ve got asynchronous requests and so on going on as well   I d recommend a library like Prototype or jQuery   This will make just about everything you ll need to do  including this  very simple   So let s say you ve got jQuery on your page now  you could use code like this to add a class name to an element  on load  in this case      document  ready  function           div1   addClass   some other class            Check out the jQuery API browser for other stuff

User · Answer

Assuming you re doing more than just adding this one class  eg  you ve got asynchronous requests and so on going on as well   I d recommend a library like Prototype or jQuery   This will make just about everything you ll need to do  including this  very simple   So let s say you ve got jQuery on your page now  you could use code like this to add a class name to an element  on load  in this case      document  ready  function           div1   addClass   some other class            Check out the jQuery API browser for other stuff

User · Answer

To add  remove or check element classes in a simple way   var uclass         exists  function elem className  var p   new RegExp         className          return  elem className  amp  amp  elem className match p          add  function elem className  if uclass exists elem className   return true  elem className        className        remove  function elem className  var c   elem className var p   new RegExp         className          c   c replace p      replace     g      elem className   c       var elem   document getElementById  someElem      Add a class  only if not exists yet  uclass add elem  someClass      Remove class uclass remove elem  someClass

User · Answer

You can use the classList add OR classList remove method to add remove a class from a element   var nameElem   document getElementById  name   nameElem classList add  anyclss     The above code will add and NOT replace  a class  anyclass  to nameElem  Similarly you can use classList remove   method to remove a class   nameElem classList remove  anyclss

User · Answer

To add  remove or check element classes in a simple way   var uclass         exists  function elem className  var p   new RegExp         className          return  elem className  amp  amp  elem className match p          add  function elem className  if uclass exists elem className   return true  elem className        className        remove  function elem className  var c   elem className var p   new RegExp         className          c   c replace p      replace     g      elem className   c       var elem   document getElementById  someElem      Add a class  only if not exists yet  uclass add elem  someClass      Remove class uclass remove elem  someClass

User · Answer

For those using Lodash and wanting to update className string      get element reference var elem   document getElementById  myElement        add some classes  Eg   nav  and  nav header  elem className     chain elem className  split    s     union   nav   navHeader    join      value       remove the added classes elem className     chain elem className  split    s     difference   nav   navHeader    join      value

User · Answer

In my case  I had more than one class called main-wrapper in the DOM  but I only wanted to affect the parent main-wrapper  Using  first Selector  https   api jquery com first-selector    I could select the first matched DOM element  This was the solution for me    document  ready  function             main-wrapper first   addClass  homepage-redesign            deals-index  gt  div eq 0   gt  div eq 1    addClass  doubleheaderredesign          I also did the same thing for the second children of a specific div in my DOM as you can see in the code where I used     deals-index  gt  div eq 0   gt  div eq 1    addClass  doubleheaderredesign     NOTE  I used jQuery as you can see

User · Answer

first  give the div an id  Then  call function appendClass    lt script language  javascript  gt    function appendClass elementId  classToAppend       var oldClass   document getElementById elementId  getAttribute  class        if  oldClass indexOf classToAdd     -1              document getElementById elementId  setAttribute  class   classToAppend            lt  script gt

[javascript] How to add a class to a given element?

Examples related to javascript

Examples related to dom-manipulation