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– quietmint2013-04-05 00:47:04 +00:00Commented Apr 5, 2013 at 0:47
-
@user113215 just want to know if it was possible:)Maverick– Maverick2013-04-05 00:57:09 +00:00Commented Apr 5, 2013 at 0:57
Add a comment
|
6 Answers
$('link[rel="stylesheet"]').attr('disabled', 'disabled');
this should disable all of them, then the opposite to renable them:
$('link[rel="stylesheet"]').removeAttr('disabled');
6 Comments
Maverick
Short and sweet. Works great. Thanks MaxOvrdrv!
Maverick
@mdmullinax your fiddle doesn't seem to work on button click!
Maverick
@mdmullinax you're right works in chrome. Not in FF. Either way great answer! Upvoting your fiddle too :)
Rory O'Kane
This does not work in Firefox. MDN says 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.
Fizzix
@RoryO'Kane is correct. Better to follow his suggestion.
|
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.
Comments
$('link[rel=stylesheet][href~="somelink.com"]').attr('disabled', 'true');
Comments
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/
Comments
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');
Comments
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.
