Jump to content
Killersites Community
Sign in to follow this  
Kervtuza

Using a drop-down menu to change a stylesheet

Recommended Posts

Hey Guys,

 

Can anyone explain or point me in the right direction for using a drop-down menu to change the external stylesheet my page uses? Can this be done by just using HTML or will I need a script to do it?

Share this post


Link to post
Share on other sites

Here is a script that should work. I used it on a website once before. This uses a ul instead of form code you could do the same thing with form code though. This is a simple script. You may prefer the link that Ben posted because it saves the option through cookies.

 

HTML

<html>
<head>
<link href="style1.css" id="myCSS">
</head>
<body>
<ul id="navigation">
	<li><a href="#" id="style1">Style 1</a></li>
	<li><a href="#" id="style2">Style 2</a></li>
</ul>
</body>
</html>

 

JS

function style2() {
document.getElementById("myCSS").setAttribute("href", "style2.css");
}
function style1() {
document.getElementById("myCSS").setAttribute("href", "style1.css");
}
window.onload = function() {
document.getElementById('style2').onclick = style2;
document.getElementById('style1').onclick = style1;
}

Share this post


Link to post
Share on other sites

Better if you go for Java script instead of HTML,and look at following code:

<script type="text/javascript">

$(function() {

$("#giveAId").change(function(){ //2 step

var stylesheet = $(this).val(); // 3 step

$('link').attr('href',stylesheet+ '.css'); //4 step done here

});

});

 

</script>

 

 

<div style="float:right;padding:26px 0 0 0;color:#fff;">

<select id="giveAId"> // 1 step

<option>please select your choice</option>

<option value="one">blue</option>

<option value="two">pink</option>

</select>

</div>

Share this post


Link to post
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
Sign in to follow this  

×