Javascript – Creating Dynamic styles using CSS?

@renegade420Apr 09.2009

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

to post a comment

JavaScript

@TheBearMayApr 09.2009 — #Easiest way is to set up separate style sheets and then do something like:

[code=html]<!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>[/code]

@renegade420authorApr 09.2009 — #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.

@TheBearMayApr 09.2009 — #You mean something like:

[code=html]
 <!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>[/code]

Javascript – Creating Dynamic styles using CSS?

3 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Javascript – Creating Dynamic styles using CSS?

3 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

3 Comments(s) _↴

Also in #JavaScript _↴