aggiungere/levare classi - come si richiama questo script?

Ciao a tutti...

ho trovato QUESTO SCRIPT che dovrebbe permettermi di aggiungere/levare classi agli elementi della pagina...

function HasClassName(objElement, strClass)
function AddClassName(objElement, strClass, blnMayAlreadyExist)
function RemoveClassName(objElement, strClass)


ma non so come richiamarlo onclick o altro...

ad esempio:
<a href="#" onclick="RemoveClassName(COSA_QUI??,'destra');">de stra</a>

cosa ci va al posto del MAISCOLO per far lavorare la funzione che segue e cancellare la classe DESTRA?

qualcuno ha due minuti per postarmi qualche riga di markup che mi faccia vedere il funzionamento dello script?

Grazie in anticipo e comunque...

// ----------------------------------------------------------------------------
// HasClassName
//
// Description : returns boolean indicating whether the object has the class name
//    built with the understanding that there may be multiple classes
//
// Arguments:
//    objElement              - element to manipulate
//    strClass                - class name to add
//
function HasClassName(objElement, strClass)
   {

   // if there is a class
   if ( objElement.className )
      {

      // the classes are just a space separated list, so first get the list
      var arrList = objElement.className.split(' ');

      // get uppercase class for comparison purposes
      var strClassUpper = strClass.toUpperCase();

      // find all instances and remove them
      for ( var i = 0; i < arrList.length; i++ )
         {

         // if class found
         if ( arrList[i].toUpperCase() == strClassUpper )
            {

            // we found it
            return true;

            }

         }

      }

   // if we got here then the class name is not there
   return false;

   }
//
// HasClassName
// ----------------------------------------------------------------------------


// ----------------------------------------------------------------------------
// AddClassName
//
// Description : adds a class to the class attribute of a DOM element
//    built with the understanding that there may be multiple classes
//
// Arguments:
//    objElement              - element to manipulate
//    strClass                - class name to add
//
function AddClassName(objElement, strClass, blnMayAlreadyExist)
   {

   // if there is a class
   if ( objElement.className )
      {

      // the classes are just a space separated list, so first get the list
      var arrList = objElement.className.split(' ');

      // if the new class name may already exist in list
      if ( blnMayAlreadyExist )
         {

         // get uppercase class for comparison purposes
         var strClassUpper = strClass.toUpperCase();

         // find all instances and remove them
         for ( var i = 0; i < arrList.length; i++ )
            {

            // if class found
            if ( arrList[i].toUpperCase() == strClassUpper )
               {

               // remove array item
               arrList.splice(i, 1);

               // decrement loop counter as we have adjusted the array's contents
               i--;

               }

            }

         }

      // add the new class to end of list
      arrList[arrList.length] = strClass;

      // add the new class to beginning of list
      //arrList.splice(0, 0, strClass);
     
      // assign modified class name attribute
      objElement.className = arrList.join(' ');

      }
   // if there was no class
   else
      {

      // assign modified class name attribute     
      objElement.className = strClass;
   
      }

   }
//
// AddClassName
// ----------------------------------------------------------------------------


// ----------------------------------------------------------------------------
// RemoveClassName
//
// Description : removes a class from the class attribute of a DOM element
//    built with the understanding that there may be multiple classes
//
// Arguments:
//    objElement              - element to manipulate
//    strClass                - class name to remove
//
function RemoveClassName(objElement, strClass)
   {

   // if there is a class
   if ( objElement.className )
      {

      // the classes are just a space separated list, so first get the list
      var arrList = objElement.className.split(' ');

      // get uppercase class for comparison purposes
      var strClassUpper = strClass.toUpperCase();

      // find all instances and remove them
      for ( var i = 0; i < arrList.length; i++ )
         {

         // if class found
         if ( arrList[i].toUpperCase() == strClassUpper )
            {

            // remove array item
            arrList.splice(i, 1);

            // decrement loop counter as we have adjusted the array's contents
            i--;

            }

         }

      // assign modified class name attribute
      objElement.className = arrList.join(' ');

      }
   // if there was no class
   // there is nothing to remove

   }
//
// RemoveClassName
// ----------------------------------------------------------------------------

[dreadnaut]

objElement dovrebbe essere un elemento della pagina, ovvero un nodo del DOM.

Ad esempio this, per applicare la funzione all'elemento stesso, nel tuo esempio sopra; oppure document.getElementById('ipocondria') per recuperare il nodo di <h2 id="ipocondria">A proposito di...</h2>

Solo per ringraziarti, dreadnaut...


Intanto avevo trovato una versione semplificata di un javascript che mi permetteva di fare la stessa cosa...

Posto il codice di una demo che ho preparato per fare esercizio con .js...

buonanotte a tutti...

<html><head>
<style type="text/css">
.display {width:800px;height:200px;background:#FFFFCC;border:1px solid #ff0000; margin:auto}
.box {width:300px;height:100px;background:#CCFF00;border:1px solid #FF6600; float:none; margin:auto;}
.active {background:#99FF00}

.destra {float:right;}
.sinistra {float:left;}
</style>
<script type="text/javascript">
function hasClass(ele,cls) {
	return ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));
}

function addClass(ele,cls) {
	if (!this.hasClass(ele,cls)) ele.className += " "+cls;
}

function removeClass(ele,cls) {
	if (hasClass(ele,cls)) {
		var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)');
		ele.className=ele.className.replace(reg,' ');
	}
}

	
// a destra
function highlightStandardDestra(elementId) {
	
	var elementId = document.getElementById(elementId);
	
	if(hasClass(elementId,'destra')) {
		removeClass(elementId,'destra');
	} else {
		addClass(elementId,'destra');
	}
}


// a sinistra
function highlightStandardSinistra(elementId) {
	
	var elementId = document.getElementById(elementId);
	
	if(hasClass(elementId,'sinistra')) {
		removeClass(elementId,'sinistra');
	} else {
		addClass(elementId,'sinistra');
	}
}


// bottone
function highlightStandardBottone(elementId) {
	
	var elementId = document.getElementById(elementId);
	
	if(hasClass(elementId,'active')) {
		removeClass(elementId,'active');
	} else {
		addClass(elementId,'active');
	}
}
</script>
</head><body>

<div class="display">
	<div id="myDiv" class="box">
	usa i bottoni per posizionarmi
	</div>
</div>

<hr style="clear:both" />

<div style="width:45%;float:left; background:#FFFFCC; border:1px solid #FF0000">
<input type="button" id="bottone2" onclick="highlightStandardSinistra('myDiv'); highlightStandardBottone('bottone2');" value="a sinistra" />
al click attiva una classe che dichiara il box float:left e manda il box a sinistra...
al RIclick disattivi la classe che hai attivato...
</div>
<div style="width:45%;float:right; background:#FFFFCC; border:1px solid #FF0000">
<input type="button" id="bottone1" onclick="highlightStandardDestra('myDiv'); highlightStandardBottone('bottone1');" value="a destra" />
al click attiva una classe che dichiara il box float:right e manda il box a destra...
al RIclick disattivi la classe che hai attivato...
</div>

<hr style="clear:both" />

<p><strong>memo</strong>: a seconda della posizione che occupa nel css rispetto all'altra, una classe applicata per seconda può non aver effetto: in questo caso se il box lo mandi a sinistra e poi aggiungi la classe per mandarlo a destra, non ti riesce (i css sono stili a cascata, quindi la successiva ( .sinistra {float:left;} ) avrà priorità sulla precedente ( .destra {float:right;} )... basta un pizzico di logica...): ma il sistema funziona: basta disattivare la classe sinistra e il box andrà a collocarsi correttamente a destra perchè agirà solo il float:right...</p>

<p><strong>memo2</strong>: occhio al css che è stato scritto al volo... fuori da FF potrebbe fare casini...</p>

</body></html>