Using a drop-down menu to change a stylesheet

Kervtuza · August 15, 2012

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?

falkencreative · August 15, 2012

This isn't something you can do with plain HTML and CSS -- you will need to use Javascript. Searching for "Javascript style switcher" should give you some options... Here's a link to one that uses a select input to change styles: http://www.dynamicdrive.com/dynamicindex9/stylesheetswitcher.htm

benjaminmorgan · August 15, 2012

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;
}

Kervtuza · August 15, 2012

Awesome! This is exactly what I was looking for, thanks guys.

Dhanishta · September 24, 2012

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

$(function() {

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

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

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

});

</script>

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

<option>please select your choice</option>

</select>

</div>

Sign In

Using a drop-down menu to change a stylesheet

Recommended Posts

Kervtuza

falkencreative

benjaminmorgan

Kervtuza

Dhanishta

Join the conversation

Browse

Activity

Store

Support