Switching stylesheets using jquery

Question

I need to find the right code in jquery that will allow me to switch between stylesheets fast with buttons. I currently have no jquery, for all of mine failed. I am still learning it. Anyway, here is the html:

/* Theme 1 */
body {
 background: #ff4455;
}
/* Theme 2 */
body {
 background: #ee7744;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<body>
 <input type="button" id="theme1">
 <input type="button" id="theme2">

 <script type="text/javascript"></script>
</body>

Here is a snippet of the code. I need the jquery inside the <script type="text/javascript"></script>

Thanks for your help! :D

score 1 · Answer 1 · edited May 23 '17 at 11:53

1

You have the same problem with this one, why don't take sometime to look into this.

They used jquery to change the attribute value of the link to the stylesheet.

How do I switch my CSS stylesheet using jQuery?

Thank you.

edited May 23 '17 at 11:53

Community

1
1

answered Oct 22 '15 at 01:59

Azure

36
2

score 0 · Answer 2 · answered Oct 22 '15 at 02:05

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>

score 0 · Answer 3 · answered Oct 22 '15 at 02:09

In your <head> section, put something like this:

  <link rel="stylesheet" id="currentStyle" href="theme1.css">

Then in your code block, do something like this:

 $( function()
 {
      $("button").click( function()
           {
                $("#currentStyle").attr( "href", $(this).attr("id") + ".css" );
           } );
 } );

It will hook up a function that is called whenever a button is clicked to set the page's style sheet to be the button's ID value with ".css" appended to it. So "theme1.css" if the button with id="theme1" is clicked.

score 0 · Accepted Answer · answered Oct 22 '15 at 02:12

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>

Switching stylesheets using jquery

4 Answers4