What do you want to learn today?
Treehouse is the best place to learn web design, web development, and iOS.

Code Snippet

Home » Code Snippets » JavaScript » addClass Function

addClass Function

If you are going library-free, you might need to roll your own function like this.

function addClass(id,new_class){
       var i,n=0;

       new_class=new_class.split(",");

       for(i=0;i<new_class.length;i++){
               if((" "+document.getElementById(id).className+" ").indexOf(" "+new_class[i]+" ")==-1){
                       document.getElementById(id).className+=" "+new_class[i];
                       n++;
               }
       }

       return n;
}

Usage

<div id="changeme" class="big red"></div>
<button onclick="addClass('changeme', 'round')">Add a class</button>

Reference URL

Subscribe to The Thread

  1. Liam Goodacre

    Modern browsers have a ‘classList’ dom element attribute:

    element.classList.add('classname');

    There also exists a fix for IE 8+, more info here: developer.mozilla.org/en/DOM/element.classList

    Also it is bad practice to use JavaScript inline with html elements, the convention is to attach it via as event handler.

    This could be a possible alternative:

    var addClass = function(_element, _classes) {
  var classList, item, _i, _len;
  classList = _element.classList;
  for (_i = 0, _len = classes.length; _i < _len; _i++) {
    item = classes[_i];
    classList.add(item);
  }
  return _element;
};
    Reply ↓
    • Liam Goodacre

      I’m sorry there is a small typo in my code:

      var addClass = function(_element, _classes) {
  var classList, item, _i, _len;
  classList = _element.classList;
  for (_i = 0, _len = _classes.length; _i < _len; _i++) {
    item = _classes[_i];
    classList.add(item);
  }
  return _element;
};

      Also, this would be executed as such:

      addClass(element, ['class1', 'class2']);
  2. Mathias Bynens

    This snippet assumes that a U+0020 space is used to separate class names. While that would probably work in most situations, it’s important to note that there’s more than just one space character in HTML.

    Reply ↓

Speak, my friend

At this moment, you have an awesome opportunity* to be the person your mother always wanted you to be: kind, helpful, and smart. Do that, and we'll give you a big ol' gold star for the day (literally).

Posting tips:
  • You can use basic HTML
  • When posting code, please turn all
    < characters into &lt;
  • If the code is multi-line, use
    <pre><code></code></pre>
Thank you,
~ The Management ~