jQuery – enable/disable all style sheets on page on click

Question

Is it possible to detect all style sheets on the current page with a click of a ‘disable/enable CSS’ button and disable them on the first click so none of the styling applies, and then restore them once again on second click? Any idea what the jQuery would look like, if it’s possible?

Is there a practical application here? – quietmint Apr 05 '13 at 00:47 — quietmint, Apr 05 '13 at 00:47
@user113215 just want to know if it was possible:) – Maverick Apr 05 '13 at 00:57 — Maverick, Apr 05 '13 at 00:57

score 25 · Accepted Answer · answered Apr 05 '13 at 00:44

25

$('link[rel="stylesheet"]').attr('disabled', 'disabled');

this should disable all of them, then the opposite to renable them:

$('link[rel="stylesheet"]').removeAttr('disabled');

answered Apr 05 '13 at 00:44

MaxOvrdrv

1,780
17
32

Short and sweet. Works great. Thanks MaxOvrdrv! – Maverick Apr 05 '13 at 00:49
@mdmullinax your fiddle doesn't seem to work on button click! – Maverick Apr 05 '13 at 00:51
@mdmullinax you're right works in chrome. Not in FF. Either way great answer! Upvoting your fiddle too :) – Maverick Apr 05 '13 at 00:55
11

This does not work in Firefox. [MDN says](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link#attr-disabled) that using `disabled` as an *HTML attribute* is **non-standard**; `disabled` is only a *DOM property*. You can fix your code by using `.prop('disabled', true)` and `.prop('disabled', false)` instead. – Rory O'Kane Sep 20 '13 at 17:29
@RoryO'Kane is correct. Better to follow his suggestion. – Fizzix May 28 '14 at 06:30
Definitively see @RoryO'Kane answer below for a much more compatible solution on various browsers http://stackoverflow.com/a/18922945/954777 – smonff Feb 03 '15 at 17:52

Rory O'Kane · Answer 2 · 2013-09-20T18:31:39.897

To disable all stylesheets:

$('link[rel~="stylesheet"]').prop('disabled', true);

To re-enable all stylesheets:

$('link[rel~="stylesheet"]').prop('disabled', false);

I use the ~= attribute selector here instead of = so that the selector will still work with stylesheets where the rel attribute is alternate stylesheet, not just stylesheet.

Also, it is important to use .prop, not .attr. If you use .attr, the code will not work in Firefox. This is because, according to MDN, disabled is a property of the HTMLLinkElement DOM object, but not an attribute of the link HTML element. Using disabled as an HTML attribute is nonstandard.

score 2 · Answer 3 · answered Apr 05 '13 at 00:43

2

$('link[rel=stylesheet][href~="somelink.com"]').attr('disabled', 'true');

answered Apr 05 '13 at 00:43

What have you tried

11,018
4
31
45

score 1 · Answer 4 · answered Apr 05 '13 at 00:47

Here is a rough example that relies on assigning an id to a style and then removing and restoring it using a variable.

HTML

<style id="test">
.test{
  background: red;
  width: 100px;
  height: 100px;
}
</style>
<div class="test">Something</div>
<div id="remove">Click to Remove</div>
<div id="restore">Click to Restore</div>

Javascript

var css = $("#test");
$("#remove").click(function(){
    css.remove();
});

$("#restore").click(function(){
    $("head").append(css);
});

Working Example http://jsfiddle.net/Fwhak/

score 0 · Answer 5 · answered Apr 16 '14 at 15:42

I found the found the following worked in all browsers for me:

CSS Link:
<link rel="stylesheet" href="http://basehold.it/22" data-role="baseline">

JQuery:
$('link[data-role="baseline"]').attr('href', '');

The above will disable only that one stylesheet, and this could be toggled on and off.

score 0 · Answer 6 · answered Feb 03 '15 at 15:56

Here is another method that you can try to do that thing.

$('*[rel=stylesheet]').attr('disabled', 'true');
$('link[rel=stylesheet]').attr('disabled', 'true');

and in other hand you remove that attribute

$('link[rel=stylesheet]').attr('disabled', 'false');
$('*[rel=stylesheet]').attr('disabled', 'false');

jQuery – enable/disable all style sheets on page on click

6 Answers6

Linked