Changing inline CSS definition on the fly

[LFI]

I did a search on this Forum, but couldn't find exactly what I'm after.

I have a page I'm developing and I want it to look different depending on whether an admin person (with editing rights) is using it, or a regular user.

For example, I might have the following:

<input type='text' size='30' value='LookingForInfo' class='admin' /><span class='user'>LookingForInfo</span>

...and the styles...

.admin{
 display:inline;
}

.user{
 display:none;
}

...while the admin person is using the application. I want to put a switch on the screen so the admin user can take a look at what the user will see. Basically, when the switch is thrown, I want to change the styles to:

.admin{
 display:[blue]none[/blue];
}

.user{
 display:[blue]inline[/blue];
}

Is this possible? It would be so much easier to do this than to collect all the items with admin classes and switch the display property one-by-one (and likewise for the elements with the class 'user').

Thanks for your time!

--Dave

 

[LFI]

'found my answer at

http://www.devx.com/getHelpOn/10MinuteSolution/20746

function getRule(ruleName)
{
 var styleSheet=null;
 for (var i=0; i<document.styleSheets.length; i++)
 {
  styleSheet=document.styleSheets[i];
  for (var j=0; j<styleSheet.rules.length; j++)
  {
   rule=styleSheet.rules[j];
   if ((rule.selectorText=="."+ruleName)||(rule.selectorText==ruleName))
   {
    return rule;
   }//end if				
  }//end for
 }//end for
}//end getRule(var)

var admin = getRule("admin");
var user = getRule("user");

function makeAdmin()
{
 admin.style.display = 'inline';
 user.style.display = 'none';
}//end makeAdmin()

function makeUser()
{
 admin.style.display = 'none';
 user.style.display = 'inline';
}//end makeUser()

Then I just call makeAdmin() or makeUser() when I need to change the rule!

--Dave