CODEWITHSUNDEEP
javascript
muudless
muudless

Reputation: 7532

How to add additional class name to an element?

I can't believe I can't find this in google - I need to add an additional class name to a div with the classname checkField:

<div id="wth" class="checkField"><label>Ok whatever</label></div>

document.getElementById("wth").className="error"; // This works
document.getElementsByClassName("field").className="error"; // Doesn't work

I tried this:

document.getElementsByClassName("field").getElementsByTagName("label").className="error";

^ Also doesn't work.

Can someone please give me some advice? I'm too use to JQuery.

Upvotes: 1

Views: 321

Answers (4)

jfriend00
jfriend00

Reputation: 707326

Here's are simple utility functions for adding and removing a class:

function addClass(elem, cls) {
    var oldCls = elem.className;
    if (oldCls) {
        oldCls += " ";
    }
    elem.className = oldCls + cls;
}

function removeClass(elem, cls) {
    var str = " " + elem.className + " ";
    elem.className = str.replace(" " + cls + " ", " ").replace(/^\s+|\s+$/g, "");
}

Upvotes: 0

slebetman
slebetman

Reputation: 113896

The getElementsByClassName method returns a nodeList, which is an array-like object, not a single element. To do what you want you need to iterate the list:

var divs = document.getElementsByClassName("checkField");
if (divs) {
  // Run in reverse because we're
  // modifying the result as we go:
  for (var i=divs.length; i-- >= 0;) {
    divs[i].className = 'error';
  }
}

Also, just setting className actually replaces the class instead of adding to it. If you want to add another class you need to do it like this:

divs[i].className += ' error'; // notice the space bar

As for the second thing you're trying to do, that is setting the class of the label instead of the div, you need to loop through the divs and call getElementsByTagName on them:

var divs = document.getElementsByClassName("checkField");
if (divs) {
  // Run in reverse because we're
  // modifying the result as we go:
  for (var i=divs.length; i-- >= 0;) {
    var labels = divs[i].getElementsByTagName('label');
    if (labels) {
      for (var j=0; j<labels.length; j++) {
        labels[j].className = 'error';
      }
    }
  }
}

Upvotes: 1

Sampson
Sampson

Reputation: 268344

You need to add the class onto the current value:

document.body.className += " foo"; // adds foo class to body

Some browsers support classList which provides methods for adding, removing, and toggling classes on elements. For instance, you could add a new class like this:

document.body.classList.add("newClass");

Imagine the work involved in toggling a class; you'd have to perform some string operation to first determine whether a class is already on the element or not, and then respond accordingly. With classList you can just use the toggle method:

document.body.classList.toggle("toggleMe");

Some browsers don't currently support classList, but this won't prevent you from taking advantage of it. You can download a polyfill to add this feature where it's not natively supported.

Upvotes: 1

NullPoiиteя
NullPoiиteя

Reputation: 57322

try something like

you want to do this by document.body

so try 

var demo =document.body; 

// also do this by class like var demo = document.getElementsByClassName("div1one"); 
// or id var demo = document.getElementsId("div1one"); 

demo .className = demo .className + " otherclass";

or simpler solution if you have jquery as an option

 $("body").addClass("yourClass");

Upvotes: 0

Related Questions