How do I switch my CSS stylesheet using jQuery?

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.

Val · Accepted Answer · 2011-10-21 08:52:18Z

74

$('#grayscale').click(function (){ $('link[href="style1.css"]').attr('href','style2.css'); }); $('#original').click(function (){ $('link[href="style2.css"]').attr('href','style1.css'); });

Give this a try but not sure if it will work I have not tested it but gd luck.

edited Oct 21, 2011 at 8:52

answered Oct 21, 2011 at 8:43

Val

17.6k24 gold badges99 silver badges148 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Michael Schwartz Over a year ago

Thanks this helped me out (modified version): --- $("button#grayscale").click(function() { $("link[rel=stylesheet]").attr({href : "style2.css"}); });

Val Over a year ago

yep you are right, attr('href') lol, sorry, btw u don't need button in front of selector followed by id selector, as IDs should be unique according to specifications and you shouldn't have duplicate IDs, hence why we use classes :)

Jay Over a year ago

Nice answer. If only dealing with 2 variants. Won't work for 3 stylesheets.

Val Over a year ago

@jay you can always convert the ids to classes, but I wanted to keep it relative to the question asked :) but I agree with you :)

Reverend Bubbles Over a year ago

This is great, except how to get the page to reload with the new stylesheet? I'm doing this with LESS as well. I'm not getting errors, but it's also not reloading.

Tetaxa · Accepted Answer · 2017-01-24 13:38:37Z

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")); }

Tân · Accepted Answer · 2019-11-29 01:22:56Z

You can try to do that by this way:

<link id="original" rel="stylesheet" type="text/css" href="style1.css"> <script> function turnGrey(){ //what ever your new css file is called document.getElementById("original").href="grey.css"; } </script> <button id="grey" onclick="turnGrey">Turn Grey</button><br />

Fopa Léon Constantin · Accepted Answer · 2014-10-07 01:09:57Z

Use this :

<link href="Custom.css" rel="stylesheet" /> <link href="Blue.css" rel="stylesheet" /> <link href="Red.css" rel="stylesheet" /> <link href="Yellow.css" rel="stylesheet" /> <select id="changeCss"`enter code here`> <option onclick="selectCss(this)" value="Blue">Blue</option> <option onclick="selectCss(this)" value="Red">Red</option> <option onclick="selectCss(this)" value="Yellow">Yellow</option> </select> <script type="text/javacript"> function selectCss() { var link = $("link[rel=stylesheet]")[0].href; var css = link.substring(link.lastIndexOf('/') + 1, link.length) $('link[href="' + css + '"]').attr('href', $('#changeCss').val() + '.css'); } </script>

Akhilraj Nambiar · Accepted Answer · 2021-04-14 06:24:31Z

I had a dark theme by default on my webpage. To convert it to light theme, I had used the sun icon font by google. So in a simple way, the code to switch between the themes in jquery was:

$('.theme').click(function() { if ($('.theme').children('img').attr('src') == 'images/lighttheme.png') { **$('link').attr('href', 'css/styleslight.css');** $('.theme').children('img').attr('src', 'images/darktheme.png') } else if ($('.theme').children('img').attr('src') == 'images/darktheme.png') { **$('link').attr('href', 'css/stylesdark.css');** $('.theme').children('img').attr('src', 'images/lighttheme.png'); } });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

The first line of the if and else if statement is the full answer. The remaining text involves just changing the icon when clicked from moon to sun, or vice-versa.

Collectives™ on Stack Overflow

How do I switch my CSS stylesheet using jQuery?

5 Answers 5

5 Comments

Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

5 Comments

Comments

Comments

Comments

Comments

Linked

Related