Question

是否可以通过单击“禁用/启用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);

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

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

Answer 3

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

Answer 4

以下是一个粗略的示例，它依赖于为样式分配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/

Answer 5

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

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

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

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

6 个答案: