apply multiple classes

[spolsky]

it is possible by dom(scripting) to apply multiple classes to the
className attribute.
elmRef.className = 'Class1 Class2 ...' ;

but what if some other script assigns its own classes. in this case, it
would be possible to track our classes in the className attribute(by
searching in the string) and remove or add them accordingly but aren't
there any flexible approach? it would be better if className is a
collection that we could determine easily if required classes are
applied or not.
or is there any different/better approach to apply our multiple classes
without depending on other scripts on the page?

thanks

[Den Odell]

Only thing I can think of is to write your own JS functions for
handling reading back and adding to className, splitting an array on
the 'space' character should start you off. I can imagine someone must
have written one already.. anyone?

Good luck
Den
spolsky wrote:

it is possible by dom(scripting) to apply multiple classes to the
className attribute.
elmRef.className = 'Class1 Class2 ...' ;

but what if some other script assigns its own classes. in this case, it
would be possible to track our classes in the className attribute(by
searching in the string) and remove or add them accordingly but aren't
there any flexible approach? it would be better if className is a
collection that we could determine easily if required classes are
applied or not.
or is there any different/better approach to apply our multiple classes
without depending on other scripts on the page?

thanks

[Harlan Messinger]

spolsky wrote:

it is possible by dom(scripting) to apply multiple classes to the
className attribute.
elmRef.className = 'Class1 Class2 ...' ;

but what if some other script assigns its own classes. in this case, it
would be possible to track our classes in the className attribute(by
searching in the string) and remove or add them accordingly but aren't
there any flexible approach? it would be better if className is a
collection that we could determine easily if required classes are
applied or not.

Untested code:

function hasClassName(str, className)
{
var strPadded = " " + str + " ";
var classNamePadded = " " + className + " ";
return strPadded.indexOf(classNamePadded) != -1;
}

function removeClassName(element, className)
{
var strPadded = " " + element.className + " ";
var classNamePadded = " " + className + " ";
var result = strPadded.replace(classNamePadded, "");
result = result.substring(1, result.length - 1);
element.className = result;
}

function addClassName(element, className)
{
var str = element.className;
if (!hasClassName(str, className))
{
str += " ";
str += className;
element.className = str;
}
}
?

or is there any different/better approach to apply our multiple classes
without depending on other scripts on the page?

thanks