It is common knowledge that getting and setting the class of an element in Internet Explorer requires a bit of a work-around from the standard JavaScript solution that works with all other browsers.
The Usual Way
For example, using
setAttribute to set the class requires two different values depending on whether the browser is Internet Explorer (
className) or all others (
class):
// a conditional statement specifies class or className
var klass = (isIE) ? 'className' : 'class';
element.setAttribute(klass, 'new_class');
The same is also true when attempting to get the class value with
getAttribute:
element.getAttribute('className'); // for IE
element.getAttribute('class'); // everybody elseBut what if you could both get and set the values on all browsers without any conditional logic? Apparently, you can.
A Better Way
The following solution works in all versions of IE from at least 6 onward, Firefox 3, Chrome, Safari, and Opera 10. I haven't tried it on Konqueror or any of the Linux browsers yet, but I would be surprised if it did not work there equally well.
element.className; // get class(es)
element.className = 'new_class'; // (re)set to single class
// or, if you don't want to tamper with any existing
// classes: note the space before the new class name
element.className = element.className + ' new_class';
// examples
if (/new_class/.test(element.className) { // test
element.style.border = 'solid 1px #555';
}
if (someVariable == someValue) { // add "new_class" class
element.className = element.className + ' new_class';
}I have created a simple example page. In this case, the script toggles a
show and
hide class on table rows. Just
download a copy from Google Docs, open in your litany of browsers, and enjoy. :)
