Click here to Skip to main content
15,915,508 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
how do i assign a css class through javascript
Posted
Updated 23-Aug-11 22:57pm
v2

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):

JavaScript
function trimAndCondenseSpaces(str)
{
   return str.replace(/^\s+/, '').replace(/\s+$/, '').replace(/\s{2,}/, ' ');
}   // trimAndCondenseSpaces

function getElement(elementOrId)   // Arg is element id or DOM node. Result is DOM node
{
   return (
            typeof elementOrId == 'string' 
            ? document.getElementById(elementOrId) 
            : elementOrId
          );
}   // getElement

function hasClass(elementOrId, className)   // Returns: true if class present, false if absent
{

   // Class name is surrounded by whitespace unless it is the first / last
   var el = getElement(elementOrId); 
   return (new RegExp('(^|\\s)' + className + '(\\s|$)')).test(el.className);
}   // hasClass

function addClass(elementOrId, className)
{
   // Get the element from its id or use the supplied DOM node
   var el = getElement(elementOrId); 
   if (! hasClass(el, className))
      el.className = 
         el.className == ''
         ? el.className + ' ' + className
         : className;
}   // addClass

function dropClass(elementOrId, className)
{
   var el = getElement(elementOrId); 
   if (hasClass(el, className))
      el.className = 
         trimAndCondenseSpaces(
            el.className
               .replace(new RegExp('(^|\\s)' + className + '(\\s|$)'), ' ')
            ); 
}   // dropClass

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); 
}   // replaceClass
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900