Kervtuza Posted August 15, 2012 Report Share Posted 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? Quote Link to comment Share on other sites More sharing options...
falkencreative Posted August 15, 2012 Report Share Posted 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 Quote Link to comment Share on other sites More sharing options...
benjaminmorgan Posted August 15, 2012 Report Share Posted 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; } Quote Link to comment Share on other sites More sharing options...
Kervtuza Posted August 15, 2012 Author Report Share Posted August 15, 2012 Awesome! This is exactly what I was looking for, thanks guys. Quote Link to comment Share on other sites More sharing options...
Dhanishta Posted September 24, 2012 Report Share Posted September 24, 2012 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> Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.