26

How can I set an element to have multiple classes?

Initial attempt:

element.setAttribute("class","class1","class2");
element.className="class1 , class2";
element.class="class1 , class2";
1
  • Does the element initially have any classes set? Jul 28, 2011 at 14:22

11 Answers 11

51

Just set the attribute as normal. It just sets the attribute to whatever string you pass it, it isn't aware of any special rules for how the value gets handled.

The attribute takes a space separated list of classes so:

element.setAttribute("class","class1 class2");

However… older versions (I think 7 and lower) of Internet Explorer have serious bugs in their setAttribute implementation — so don't use it. Use the className property instead.

element.className = "class1 class2";

Note, also, that these are HTML classes. They uses beyond the application of styles. There is no such thing as a CSS class (although there are class selectors, other selectors, rule sets and properties, all of which have been (incorrectly and confusingly) called "classes" at some time or another).

2
  • so the ',' must have been tripping me up. Thanks
    – OVERTONE
    Jul 28, 2011 at 14:09
  • 1
    element.className = "class1 class2"; => in IE8 sets only first class name
    – cosmoloc
    Nov 26, 2014 at 14:07
7

The attribute className is a space-separated list of values.

0
6

Try this:

document.getElementById("MyElement").className = "class1 class2";

(notice the space instead of comma between the two names)

Or, if you want to add on to the classes already there:

    document.getElementById("MyElement").className += " class1 class2";
3

if you're looking to append (not destory current classes), I would do

element.className = element.className + " anotherclass yetanotherclass"
1
  • The leading space here is important. Otherwise you wind up with firstclassanotherclass yetanotherclass .
    – DaveL17
    Nov 4, 2023 at 11:04
2

Don't use commas. Just set the class name with spaces between multiple classes. I would use jQuery addClass method- if you are are using jQuery :).

2

It is safe to use element.className += "classname" so that the new class gets appended to the list of classes already present.

1
  • 2
    it would be element.className += " classname" (note the space for seperation from the others)
    – Solo
    Oct 25, 2012 at 15:39
1

Easy if you can hook it to an ID

document.getElementById("a").className = "newClass anotherClass";

http://jsfiddle.net/jasongennaro/qaBQv/1/

1
`element.className = "class1" + " class2" + " class3"`;

or even

element.className = ["class1","class2","class3"].join(" ")

This with rewrite all previous classes. In modern browsers every DOM element also have a classList collection you can access. It has add, remove and toggle methods. It is a good example of how javascript frameworks influenced standard APIs itself.

2
  • This will not work because the class names will not be separated by spaces, which is necessary. Jul 28, 2011 at 14:10
  • Oh @Jason, it is totally OK. We live in a cruel world, where on should be very careful while producing code snippets )
    – shabunc
    Jul 28, 2011 at 14:13
1

Wouldn't this be the correct answer:

var yourDiv = document.getElementById("divName");
yourDiv.SetAttribute("class","RedClass"); 
yourDiv.SetAttribute("className","RedClass"); 

Never seen it done using className like that (e.g., yourDiv.className...).

0

Even without using setAttribute you could add multiple classes for an element by classList property (which is supported by all modern browsers).

// add or remove multiple classes
element.classList.add("foo", "bar", "baz");
element.classList.remove("foo", "bar", "baz");

Few more useful stuffs you can do using classList

Find and Replace:

// replace class "foo" with class "bar"
element.classList.replace("foo", "bar");

Check for class existence:

// check a class is exist for the element
console.log(element.classList.contains("foo")); // return true/false

Toggle class in/out:

// add the class 'foo' if the element doesn't have class 'foo'
// remove the class 'foo' if the element has the class 'foo'
console.log(element.classList.toggle("foo")); // true - class was added otherwise false.
0

the easiest way is

Element.className = "class1 class2";

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.