Kervtuza Posted August 15, 2012 Report 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
falkencreative Posted August 15, 2012 Report 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
benjaminmorgan Posted August 15, 2012 Report 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
Kervtuza Posted August 15, 2012 Author Report Posted August 15, 2012 Awesome! This is exactly what I was looking for, thanks guys. Quote
Dhanishta Posted September 24, 2012 Report 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
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.