The SO page's first option is incorrect if there are no existing classes on an element. Also, there is a problem with simply deleting and appending to replace a class name in that in some browsers (e.g. MS-IE6) the CSS is order dependent (e.g. h1.classA.classB is not the same as h1.classB.classA).
I use code similar to (E&OE):
function trimAndCondenseSpaces(str)
{
return str.replace(/^\s+/, '').replace(/\s+$/, '').replace(/\s{2,}/, ' ');
}
function getElement(elementOrId)
{
return (
typeof elementOrId == 'string'
? document.getElementById(elementOrId)
: elementOrId
);
}
function hasClass(elementOrId, className)
{
var el = getElement(elementOrId);
return (new RegExp('(^|\\s)' + className + '(\\s|$)')).test(el.className);
}
function addClass(elementOrId, className)
{
var el = getElement(elementOrId);
if (! hasClass(el, className))
el.className =
el.className == ''
? el.className + ' ' + className
: className;
}
function dropClass(elementOrId, className)
{
var el = getElement(elementOrId);
if (hasClass(el, className))
el.className =
trimAndCondenseSpaces(
el.className
.replace(new RegExp('(^|\\s)' + className + '(\\s|$)'), ' ')
);
}
function replaceClass(elementById, oldClassName, newClassName) / Adds if old class not found
{
var el = getElement(elementById);
el.className =
hasClass(el, oldClassName)
? trimAndCondenseSpaces(
el.className
.replace(new RegExp('(^|\\s)' + oldClassName + '(\\s|$)'), ' ' + newClassName + ' ')
)
: addClass(newClassName);
}