Is there a way to add a class to an element (using pure javascript) that does not have an ID, but has some existing classes? If I had:

<div class="rightAlign pushDown">...</div>

How could I add a class to make it like this

 <div class="rightAlign pushDown redOutline">...</div>

This is just a simple example. The reason for adding another class and not changing the original class in CSS or changing the class altogether with javascript is that I am dealing with elements created by Dojo. I just need to access something that has no convenient ID to grab a hold of.

Keep in mind I am working in javascript and Dojo, I can not use jQuery at all...

Is there a way to add a class to an element (using pure javascript) that does not have an ID, but has some existing classes? If I had:

<div class="rightAlign pushDown">...</div>

How could I add a class to make it like this

 <div class="rightAlign pushDown redOutline">...</div>

This is just a simple example. The reason for adding another class and not changing the original class in CSS or changing the class altogether with javascript is that I am dealing with elements created by Dojo. I just need to access something that has no convenient ID to grab a hold of.

Keep in mind I am working in javascript and Dojo, I can not use jQuery at all...

• javascript
• css
• class
• dojo

• what version of dojo? see dojotoolkit/reference-guide/1.7/dojo/addClass.html – Mangiucugna Commented Aug 1, 2013 at 22:06

2 Answers 2

The dojo way would be as:

dojo.query(".rightAlign.pushDown").addClass("redOutline");

This will add the class to add elements with those two classes

var elements = document.getElementsByClassName("existing_class");
elements[0].className += " new_class";

If you want to add a class to all elements with a specified class then use a loop:

for(var i = 0; i < elements.length; i++){
    elements[i].className =+ " new_class";
}

I think getElementsByClassName doesn't work in old IE versions though.

EDIT: Polyfill for IE support