12

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

4

6 回答 6

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

这应该禁用所有这些，然后重新启用它们：

$('link[rel="stylesheet"]').removeAttr('disabled');
于 2013-04-05T00:44:03.740 回答
8

要禁用所有样式表：

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

要重新启用所有样式表：

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

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

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

于 2013-09-20T17:54:20.790 回答
2 
$('link[rel=stylesheet][href~="somelink.com"]').attr('disabled', 'true');
于 2013-04-05T00:43:32.387 回答
1

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

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

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

于 2013-04-05T00:47:23.977 回答
0

我发现以下内容适用于我的所有浏览器：

CSS Link:
<link rel="stylesheet" href="http://basehold.it/22" data-role="baseline">

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

以上将只禁用一个样式表，并且可以打开和关闭它。

于 2014-04-16T15:42:10.567 回答
0

这是您可以尝试执行此操作的另一种方法。

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

另一方面，您删除该属性

$('link[rel=stylesheet]').attr('disabled', 'false');
$('*[rel=stylesheet]').attr('disabled', 'false');
于 2015-02-03T15:56:50.140 回答