jQuery – 单击时启用/禁用页面上的所有样式表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15824089/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery – enable/disable all style sheets on page on click
提问by Maverick
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?
是否可以通过单击“禁用/启用 CSS”按钮来检测当前页面上的所有样式表，并在第一次单击时禁用它们，以便不应用任何样式，然后在第二次单击时再次恢复它们？如果可能，您知道 jQuery 会是什么样子吗？
回答by MaxOvrdrv
$('link[rel="stylesheet"]').attr('disabled', 'disabled');
this should disable all of them, then the opposite to renable them:
这应该禁用所有这些，然后相反地重新启用它们：
$('link[rel="stylesheet"]').removeAttr('disabled');
回答by Rory O'Kane
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 selectorhere instead of =so that the selector will still work with stylesheets where the relattribute is alternate stylesheet, not just stylesheet.
我在~=这里使用属性选择器而不是=这样，选择器仍然可以处理rel属性所在的样式表alternate stylesheet，而不仅仅是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, disabledis a property of the HTMLLinkElementDOM object, but notan attribute of the linkHTML element. Using disabledas an HTML attribute is nonstandard.
此外，重要的是使用.prop，而不是.attr。如果您使用.attr，该代码将无法在 Firefox 中运行。这是因为，根据MDN，disabled是所述的属性HTMLLinkElementDOM对象，但不是所述的一个属性link的HTML元素。使用disabled作为HTML属性是非标准的。
回答by What have you tried
$('link[rel=stylesheet][href~="somelink.com"]').attr('disabled', 'true');
回答by Kevin Bowersox
Here is a rough example that relies on assigning an id to a style and then removing and restoring it using a variable.
这是一个粗略的示例，它依赖于为样式分配 id，然后使用变量删除和恢复它。
HTML
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
Javascript
var css = $("#test");
$("#remove").click(function(){
css.remove();
});
$("#restore").click(function(){
$("head").append(css);
});
Working Examplehttp://jsfiddle.net/Fwhak/
回答by Alex
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.
以上将仅禁用那个样式表，并且可以打开和关闭该样式表。
回答by Hassan Raza
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');
