Jump to content

Change <head> info onClick


himynameismark
 Share

Recommended Posts

Hey, I'm very, very new to JavaScript. I am working on designing a web site that I'm not putting on the Internet until it is at least close to finished. I want to be able to change the CSS code in the head to have various backgrounds and color schemes. I want this to be done in the form of a dropdown list. I know the code for that. What would be the simplest way to do this in JavaScript when clicking on a new option?Here is an example of what the dropdown menu will be like:

<form><select><input>Black Pinstripe</input><input>White Pinstripe</input><input>Cracked Leather</input></select></form>

Black Pinstripe will be black.css, White Pinstripe will be white.css, and Cracked Leather. Thanks in advance,Mark

Link to comment
Share on other sites

First you should have a <link> element in the head, with an id:

<link id="style" rel="stylesheet" type="text/css" href="default.css">

Then you would simply have something like this example:

<select onchange="document.getElementById('style').href=this.value"><option value="default.css">Default template</option><option value="red.css">Red template</option><option value="blue.css">Blue template</option></select>

Notice the onchange attribute. This <select> element does not need to go between <form> tags because it's not being submit to anywhere, it's being processed right on the page.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...