Jquery - Adding and removing stylesheet on click

Question

I've got an element set to append a style-sheet into the head via the following:

$(document).ready(function () {
    $(".css_switch").click(function () {
        $('head').append('<link rel="stylesheet" href="style2.css" />');
    });
});

It's working as required in terms of adding the style-sheet to the head and giving the required effect, however what I would like is that when you click .css_switch, it removes the style-sheet that I just added to the head, so it sort of turns it off and on.

Please note I don't want to disable the original style-sheet at all, as I am still using a large chunk of that.

Thanks.

When you append stylesheet also add an ID, so you can easily remove it. — skobaljic
– skobaljic, Commented Dec 16, 2016 at 16:35

raina77ow · Accepted Answer · 2016-12-16 22:04:14Z

1

You don't have to remove a stylesheet completely from DOM: just disable it. It's easy to do, actually, but there are two things to be aware of:

$(function() {
  var linkEl;
  $(".css_switch").click(function() {
    if (!linkEl) {
      linkEl = $('<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />')
                .appendTo('head')[0];
    }
    else if (linkEl.sheet) {
      linkEl.sheet.disabled = !linkEl.sheet.disabled;
    }
  });
});

Demo. Each style link element has associated StyleSheet object, which can be disabled with, quite unsurprisingly, disabled property. But there's a caveat: the aforementioned object is created only when the external CSS document is loaded and parsed. Until this, linkEl.sheet is null; hence the check.

Note that simpler version:

else { linkEl.disabled = !linkEl.disabled; }

... works too (you change property of corresponding HTMLLinkElement, disabling it instead), but there's a subtle bug: this property can be changed even when the resource is not ready. So imagine a user clicking on the button, seeing no changes afterwards (CSS isn't loaded yet). Now they click the button again, this time disabling the link - and when the resource is there, it's not shown. A user is ~~dazed and~~ confused, and that's usually not good.

With the quoted version, disabling is done only when a user sees the result of CSS change.

edited Dec 16, 2016 at 22:04

answered Dec 16, 2016 at 16:41

raina77ow

107k16 gold badges205 silver badges240 bronze badges

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

3 Comments

J.doe Over a year ago

Perfect, Thank you.

J.doe Over a year ago

Following up on this, How would I store this in a cookie so it applies to the entire site when clicking through etc?

raina77ow Over a year ago

Store 'what' in cookies? And why cookies anyway, when you can use localStorage?

Carlo · Accepted Answer · 2020-06-18 19:28:58Z

1

You can also do it like this:

var addstyle = 'true';
$('.button').on("click", function addorremovesheet() {
  if (addstyle == true) {
    $('head').append('<link rel="stylesheet" href="styles/dark.css" type="text/css" />');
    var addstyle = 'false';
  } else {
    $('link[rel=stylesheet][href~="styles/dark.css"]').remove();
    var addstyle = 'true';
  }
});

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

<head>
  <link rel="stylesheet" href="test.css">
</head>
<div class="button">click</div>

Is a bit shorter ;-) If sth. is not working please write me...

answered Jun 18, 2020 at 19:28

Carlo

2204 silver badges7 bronze badges

Comments

Jimmy Wong · Accepted Answer · 2016-12-16 16:39:26Z

0

It is not a good practices to load CSS on the fly, instead, you should load it first and use ID or name to control what is enabled or disabled

answered Dec 16, 2016 at 16:39

Jimmy Wong

5725 silver badges5 bronze badges

Collectives™ on Stack Overflow

Jquery - Adding and removing stylesheet on click

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related