[thelist] javascript - changing css with javascript

.jeff jeff at members.evolt.org
Sun Sep 22 23:53:01 CDT 2002


dru,

><><><><><><><><><><><><><><><><><><><><><><><><><><><><><
> From: Dru and Cindy Sellers
>
> var on = false
> function cssMenu(obj) { //v0.1 by Dru Sellers
> 	if (on <> true) {
> 		obj.style.display = block
> 		on = true
> 	} else {
> 		obj.style.display = none
> 		on = false
> 	}
> }
><><><><><><><><><><><><><><><><><><><><><><><><><><><><><

you've got the basic concept.  you just need to work on the syntax.

first, "does not equal" is "!=" (without the quotes) in javascript.

if(on != true)

since you're using booleans, you could use the not operator (!) in front of the variable "on".

if(!on)

second, style values are strings, not variables.  so, be sure to wrap them in quotes of some kind (i recommend single-quotes).

obj.style.display = 'block';
obj.style.display = 'none';

other than that i think you've got it.  you could simplify the code block by checking the display prior to setting it.  that'd remove the need for the global variable "on".

function cssMenu(obj)
{
  var currentDisplay = obj.style.display;
  if(currentDisplay = 'none')
    obj.style.display = 'block';
  else
    obj.style.display = 'none';
}

using the ternary operator (?:), you could shorten it to a single statement inside the cssMenu() function:

function cssMenu(obj)
{
  obj.style.display = (obj.style.display == 'none') ? 'block' : 'none';
}

good luck,

.jeff

http://evolt.org/
jeff at members.evolt.org
http://members.evolt.org/jeff/




More information about the thelist mailing list