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 applie

Answer 1

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');

Answer 2

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.

Answer 3

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

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

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

Answer 4

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.

Answer 5

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

Answer 6

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/