How do I switch my CSS stylesheet using jQuery?


Answers

I would suggest you give the link-tag an id such as theme. Put the name of the css file in a data-attribute on the buttons and use the same handler on them both:

Html:

<link id="theme" rel="stylesheet" href="style1.css">

<button id="grayscale" data-theme="style2.css">Gray Theme</button>

And js:

$("button[data-theme]").click(function() {
    $("head link#theme").attr("href", $(this).data("theme"));
}
Question

What I'm working on is simple.

You click on a button (id="themes") and it opens up a div (id="themedrop") that slides down and lists the themes. (I only have two at this point)

<button id="original">Original</button><br />
<button id="grayscale">Grayscale</button>

Now when the site is loaded it loads with style1.css (main/original theme)

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

Now what I'm trying to figure out is... How can I have it that when the grayscale button is clicked to change the stylesheet from style1.css to style2.css (note: files are in the same directory)

Any help would be much appreciated.




Switching stylesheets using jquery

Try using style elements with type set to text/plain ; on click of input type="button" set style type="text/css" to text content of style type="text/plain" having class same as id of input type="button" clicked . Approach maintains all css in same document , without need to request external style sheet at each toggle of styles

$("input[type=button]").click(function() {
  $("[type$=css]").text($("." + this.id).text())
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style type="text/css">
</style>
<style type="text/plain" class="theme1">
  /* Theme 1 */ 
  body { background: #ff4455; }
</style>
<style type="text/plain" class="theme2">
  /* Theme 2 */ 
  body { background: #ee7744; }
</style>

<body>
  <input type="button" id="theme1" value="theme1">
  <input type="button" id="theme2" value="theme2">
</body>




There should be many similar questions and answers, here's one anyway.

<html>
<head>
    <link href="css/sheet1.css" rel="stylesheet" type="text/css" id="sheet1">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
    <input type="button" id="theme1">
    <input type="button" id="theme2">
    <script type="text/javascript">
    $(document).ready(function () {
        $('#theme1').click(function(){
            $('#sheet2').remove();
            $('head').append('<link href="css/sheet1.css" rel="stylesheet" id="sheet1" />');
        });
        $('#theme2').click(function(){
            $('#sheet1').remove();
            $('head').append('<link href="css/sheet1.css" rel="stylesheet" id="sheet2" />');
        });
    });
    </script>
</body>
</html>



Simple style swicher with less

You can change the href attribute of your link tag when click on the button

So using your example

$('li').on('click', function() {
    $('link').attr('href','new_file_path_here');
});

This is a basic example, you can give your link tag an id and target it that way

Also see How do I switch my CSS stylesheet using jQuery?





Tags