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";
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";
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).
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";
if you're looking to append (not destory current classes), I would do
element.className = element.className + " anotherclass yetanotherclass"
firstclassanotherclass yetanotherclass
.
`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.
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 :).
It is safe to use element.className += "classname"
so that the new class gets appended to the list of classes already present.
Easy if you can hook it to an ID
document.getElementById("a").className = "newClass anotherClass";
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...).
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.