asked on

Change CSS Styles through javascript

I am attempting to change the class of an item through javascript according to some examples that I have found on the internet. I have created a simple page with a header in a div with id="header1". I have a drop down where a user could select a style and a button to apply it. I have two problems:

1) I tried gettting the value of the drop down box using document.getElementById("applycs").value, that didn't work.

2) I tried to apply the new CSS style using document.getElementById("header1").className = "red"; which also threw an error.

Any help would be appreciated -- I have changed the style by hand and it works fine on either style that I am using -- just get errors on the two things above

web page:  
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
 
<link href="QuoteHome.css" rel="stylesheet" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="QuoteHome.js" ></script>
<title>Home Page</title>
<div id="header1" class="red" > Welcome Home! </div>
</head>
 
<body>
 
<form method="post" name ="form1"action="">
	<select name="ApplyCS" id="applycs" style="width: 124px">
		<option selected="selected">Black</option>
		<option>Red</option>
	</select>
	<input name="apply" type="button" value="Apply Style" onclick="ApplyCS()" />
</form>
</body>
 
</html>
_______________________________________________________________________
CSS:
.black{
	font-size: larger;
	font-weight: 900;
	font-style: italic;
	font-family: "Baskerville Old Face";
	font-variant: normal;
	color: #FF0000;
	background-color: #000000;
	border-style: double;
	border-width: thick;
}
 
.red{
	font-family: "Plantagenet Cherokee";
	font-size: x-large;
	font-weight: lighter;
	font-variant: small-caps;
	color: #FFFF00;
	text-decoration: underline;
	background-color: #FF0000;
	position: absolute;
	left: 50ex;
}
 
_________________________________________________________________
javascript:
 
function ApplyCS(){	
	document.getElementById('header1').className  = "red";
}

Open in new window

gops1

Put your div after <body> tag:
<div id="header1" class="red" > Welcome Home! </div>

VoodooFrog

ASKER

okay found one error already... -- I named the function and the drop down box the exact same. I have changed the drop down box to have it's own unique name and the style change works -- so now my only question is how to get the value out of the drop down box.

ASKER CERTIFIED SOLUTION

Sinoj Sebastian

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

SOLUTION