jQuery – 单击启用/禁用页面上的所有样式表

是否可以通过单击“禁用/启用CSS”按钮检测当前页面上的所有样式表，并在第一次单击时禁用它们以便不应用任何样式，然后在第二次单击时再次还原它们？ 知道jQuery会是什么样子，如果可能的话？

Answer 1

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

这应该禁用所有这些，然后相反可以重命令它们：

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

Answer 2

要禁用所有样式表：

 $('link[rel~="stylesheet"]').prop('disabled', true); 

要重新启用所有样式表：

 $('link[rel~="stylesheet"]').prop('disabled', false); 

我在这里使用~=属性选择器而不是=这样选择器仍然可以使用样式表，其中rel属性是alternate stylesheet ，而不仅仅是stylesheet 。

此外，重要的是使用.prop ，而不是.attr 。 如果您使用.attr ，则代码将无法在Firefox中使用。 这是因为， 根据MDN ， disabled是HTMLLinkElement DOM对象的属性，但不是 link HTML元素的属性。 使用disabled作为HTML属性是非标准的。

Answer 3

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

Answer 4

这是一个粗略的示例，它依赖于为样式分配id，然后使用变量删除和恢复它。

HTML

  
Something
 
Click to Remove
 
Click to Restore 

使用Javascript

 var css = $("#test"); $("#remove").click(function(){ css.remove(); }); $("#restore").click(function(){ $("head").append(css); }); 

工作示例 http://jsfiddle.net/Fwhak/

Answer 5

我发现发现以下在我的所有浏览器中都有效：

 CSS Link:  JQuery: $('link[data-role="baseline"]').attr('href', ''); 

以上将只禁用那个样式表，这可以打开和关闭。

Answer 6

这是另一种方法，你可以尝试做那件事。

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

另一方面，你删除该属性

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