dcsimg
www.webdeveloper.com
Results 1 to 4 of 4

Thread: Javascript - Creating Dynamic styles using CSS?

  1. #1
    Join Date
    Feb 2008
    Posts
    23

    Javascript - Creating Dynamic styles using CSS?

    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

  2. #2
    Join Date
    Nov 2003
    Location
    Worthington, OH, USA
    Posts
    3,634
    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>
    54 68 65 42 65 61 72 4D 61 79

  3. #3
    Join Date
    Feb 2008
    Posts
    23
    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.

  4. #4
    Join Date
    Nov 2003
    Location
    Worthington, OH, USA
    Posts
    3,634
    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>
    54 68 65 42 65 61 72 4D 61 79

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles