Home/ Questions/Q 7740417
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T08:46:24+00:00

At the moment i have a stylesheet switcher which uses javascript to to load

  • 0

At the moment i have a stylesheet switcher which uses javascript to to load a new stylesheet based on a selection made in a dropdown menu.

I would like to re-write the code to use jQuery instead of javascript. Can anyone help me? I have had a look around for jQuery solutions, and although there are many, non utilise a dropdown menu. This is my code:

<head>

<link href="colour/light.css" rel="stylesheet" type="text/css">

<script type="text/javascript">
function changeScheme()
{ var _head = document.getElementsByTagName('head')[0];
  var _link = document.createElement('link');
_link.type = 'text/css';
_link.href = colour.colour.options[colour.colour.selectedIndex].value;
_link.rel = 'stylesheet';
_head.appendChild(_link);
}
</script>

</head>
<body>

<form action="#" name="colour" id="colour" onsubmit="return false;">
              <select name="colour" onchange="changeScheme();">
                <option value="colour/light.css">Light scheme</option>
                <option value="colour/dark.css">Dark scheme</option>
              </select>
            </form>

</body>

Thanks for the help!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team
    <head>

<link href="colour/light.css" rel="stylesheet" type="text/css" id="stylelink">

<script type="text/javascript">
function changeScheme()
{ 
  $('#stylelink').attr('href',$('#colourselector').val());
}
</script>

</head>
<body>

    <form action="#" name="colour" id="colour" onsubmit="return false;">
          <select id="colourselector" name="colour" onchange="changeScheme();">
            <option value="colour/light.css">Light scheme</option>
            <option value="colour/dark.css">Dark scheme</option>
          </select>
    </form>
</body>
    • 0