Never been to DZone Snippets before?

Snippets is a public source code repository. Easily build up your personal collection of code snippets, categorize them with tags / keywords, and share them with the world

About this user

Will Rickards http://willrickards.net/

« Newer Snippets
Older Snippets »
Showing 1-1 of 1 total  RSS 

Javascript Manipulate Class Names

I often have to manipulate class names of objects in javascript.
But className can have multiple classes in it.
These functions deal with that.

   1  
   2  // ----------------------------------------------------------------------------
   3  // HasClassName
   4  //
   5  // Description : returns boolean indicating whether the object has the class name
   6  //    built with the understanding that there may be multiple classes
   7  //
   8  // Arguments:
   9  //    objElement              - element to manipulate
  10  //    strClass                - class name to add
  11  //
  12  function HasClassName(objElement, strClass)
  13     {
  14  
  15     // if there is a class
  16     if ( objElement.className )
  17        {
  18  
  19        // the classes are just a space separated list, so first get the list
  20        var arrList = objElement.className.split(' ');
  21  
  22        // get uppercase class for comparison purposes
  23        var strClassUpper = strClass.toUpperCase();
  24  
  25        // find all instances and remove them
  26        for ( var i = 0; i < arrList.length; i++ )
  27           {
  28  
  29           // if class found
  30           if ( arrList[i].toUpperCase() == strClassUpper )
  31              {
  32  
  33              // we found it
  34              return true;
  35  
  36              }
  37  
  38           }
  39  
  40        }
  41  
  42     // if we got here then the class name is not there
  43     return false;
  44  
  45     }
  46  // 
  47  // HasClassName
  48  // ----------------------------------------------------------------------------
  49  
  50  
  51  // ----------------------------------------------------------------------------
  52  // AddClassName
  53  //
  54  // Description : adds a class to the class attribute of a DOM element
  55  //    built with the understanding that there may be multiple classes
  56  //
  57  // Arguments:
  58  //    objElement              - element to manipulate
  59  //    strClass                - class name to add
  60  //
  61  function AddClassName(objElement, strClass, blnMayAlreadyExist)
  62     {
  63  
  64     // if there is a class
  65     if ( objElement.className )
  66        {
  67  
  68        // the classes are just a space separated list, so first get the list
  69        var arrList = objElement.className.split(' ');
  70  
  71        // if the new class name may already exist in list
  72        if ( blnMayAlreadyExist )
  73           {
  74  
  75           // get uppercase class for comparison purposes
  76           var strClassUpper = strClass.toUpperCase();
  77  
  78           // find all instances and remove them
  79           for ( var i = 0; i < arrList.length; i++ )
  80              {
  81  
  82              // if class found
  83              if ( arrList[i].toUpperCase() == strClassUpper )
  84                 {
  85  
  86                 // remove array item
  87                 arrList.splice(i, 1);
  88  
  89                 // decrement loop counter as we have adjusted the array's contents
  90                 i--;
  91  
  92                 }
  93  
  94              }
  95  
  96           }
  97  
  98        // add the new class to end of list
  99        arrList[arrList.length] = strClass;
 100  
 101        // add the new class to beginning of list
 102        //arrList.splice(0, 0, strClass);
 103        
 104        // assign modified class name attribute
 105        objElement.className = arrList.join(' ');
 106  
 107        }
 108     // if there was no class
 109     else
 110        {
 111  
 112        // assign modified class name attribute      
 113        objElement.className = strClass;
 114     
 115        }
 116  
 117     }
 118  // 
 119  // AddClassName
 120  // ----------------------------------------------------------------------------
 121  
 122  
 123  // ----------------------------------------------------------------------------
 124  // RemoveClassName
 125  //
 126  // Description : removes a class from the class attribute of a DOM element
 127  //    built with the understanding that there may be multiple classes
 128  //
 129  // Arguments:
 130  //    objElement              - element to manipulate
 131  //    strClass                - class name to remove
 132  //
 133  function RemoveClassName(objElement, strClass)
 134     {
 135  
 136     // if there is a class
 137     if ( objElement.className )
 138        {
 139  
 140        // the classes are just a space separated list, so first get the list
 141        var arrList = objElement.className.split(' ');
 142  
 143        // get uppercase class for comparison purposes
 144        var strClassUpper = strClass.toUpperCase();
 145  
 146        // find all instances and remove them
 147        for ( var i = 0; i < arrList.length; i++ )
 148           {
 149  
 150           // if class found
 151           if ( arrList[i].toUpperCase() == strClassUpper )
 152              {
 153  
 154              // remove array item
 155              arrList.splice(i, 1);
 156  
 157              // decrement loop counter as we have adjusted the array's contents
 158              i--;
 159  
 160              }
 161  
 162           }
 163  
 164        // assign modified class name attribute
 165        objElement.className = arrList.join(' ');
 166  
 167        }
 168     // if there was no class
 169     // there is nothing to remove
 170  
 171     }
 172  // 
 173  // RemoveClassName
 174  // ----------------------------------------------------------------------------
 175    
« Newer Snippets
Older Snippets »
Showing 1-1 of 1 total  RSS