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?

Answer 1

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/

Answer 2

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

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

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

Answer 3

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 4

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