Javascript - Creating Dynamic styles using CSS?

**renegade420** · 04-09-2009 07:40 AM

Hi I need to create a js program that prompts the user to enter a style between 4 choice into a dialog box. Depending on the style chosen the layout of the page itself will change. Say if the user chose type in red the screen will turn red. any assistance or examples would be great

**TheBearMay** · 04-09-2009 08:03 AM

Easiest way is to set up separate style sheets and then do something like:

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title></title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function cssChng(val) {
	alert(val);
	document.getElementById("cssTag").href=val;
}	
</script>
<link href="default.css" type="text/css" rel="stylesheet" id="cssTag" />

</head>

<body>
<select onchange="cssChng(this[this.selectedIndex].value)">
	<option value="default.css">Default</option>
	<option value="css1.css">First</option>
	<option value="css2.css">Second</option>
</select>

</body>
</html>

**renegade420** · 04-09-2009 08:11 AM

Thanks

In this case I need a prompt box for the user to enter which style they like and I need for all css styles to be embedded in the head of the document.

I tried to find examples on google but havent found what I'm looking for.

**TheBearMay** · 04-09-2009 09:38 AM

You mean something like:

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title></title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function cssChng(val) {
	document.getElementById("cssTag").href=val;
}	
</script>
<link href="default.css" type="text/css" rel="stylesheet" id="cssTag" />

</head>

<body>
Enter Style Name
<input type="text" onchange="cssChg(this.value+'.css')" />

</body>
</html>

Thread: Javascript - Creating Dynamic styles using CSS?

Thread Tools

Display

Javascript - Creating Dynamic styles using CSS?

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions