Jquery - 单击添加和删除样式表

Question

我有一个元素集，可以通过以下方式将样式表 append 到头部:

$(document).ready(function () {
    $(".css_switch").click(function () {
        $('head').append('<link rel="stylesheet" href="style2.css" />');
    });
});

它在将样式表添加到头部并提供所需效果方面按要求工作，但是我想要的是当您单击 .css_switch 时，它会删除样式表我刚刚添加到头部，所以它可以关闭和打开它。

请注意，我根本不想禁用原始样式表，因为我仍在使用其中的大部分内容。

谢谢。

Answer 1

您不必从 DOM 中完全删除样式表:只需禁用它即可。其实很容易做到，但有两点需要注意:

$(function() {
  var linkEl;
  $(".css_switch").click(function() {
    if (!linkEl) {
      linkEl = $('<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />')
                .appendTo('head')[0];
    }
    else if (linkEl.sheet) {
      linkEl.sheet.disabled = !linkEl.sheet.disabled;
    }
  });
});

Demo .各款link element已关联StyleSheet object , 这可以被禁用，毫不奇怪，disabled属性(property)。但有一个警告:上述对象仅在加载和解析外部 CSS 文档时创建。在此之前，linkEl.sheet是null ;因此检查。

请注意更简单的版本:

else { linkEl.disabled = !linkEl.disabled; }

... 也有效(您更改相应 HTMLLinkElement 的属性，改为禁用它)，但有一个微妙的错误:此属性可以更改即使资源未准备好。所以想象一下用户点击按钮，之后没有看到任何变化(CSS 还没有加载)。现在他们再次单击该按钮，这次禁用了链接 - 当资源存在时，它不会显示。用户 茫然和 感到困惑，这通常不好。

对于引用的版本，仅当用户看到 CSS 更改的结果时才会禁用。