CODEWITHSUNDEEP
jquerycssstylesheet
Maverick
Maverick

Reputation: 1123

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

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?

Upvotes: 12

Views: 26640

Answers (6)

Hassan Raza
Hassan Raza

Reputation: 679

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

Upvotes: 1

Alex
Alex

Reputation: 2780

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.

Upvotes: 0

Rory O&#39;Kane
Rory O&#39;Kane

Reputation: 30398

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.

Upvotes: 8

Kevin Bowersox
Kevin Bowersox

Reputation: 94469

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/

Upvotes: 1

MaxOvrdrv
MaxOvrdrv

Reputation: 1916

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

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

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

Upvotes: 25

What have you tried
What have you tried

Reputation: 11148

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

Upvotes: 2

Related Questions