Question

我有一个元素集可以通过以下方式将样式表附加到头部：

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

它可以根据需要在将样式表添加到头部并提供所需效果方面起作用，但是我想要的是当您单击.css_switch时，它会删除我刚刚添加的样式表到了头部，所以它会关掉它。

请注意我根本不想禁用原始样式表，因为我仍然使用了大量的样式表。

感谢。

Answer 1

您也可以这样：

var addstyle = 'true';
$('.button').on("click", function addorremovesheet() {
  if (addstyle == true) {
    $('head').append('<link rel="stylesheet" href="styles/dark.css" type="text/css" />');
    var addstyle = 'false';
  } else {
    $('link[rel=stylesheet][href~="styles/dark.css"]').remove();
    var addstyle = 'true';
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<head>
  <link rel="stylesheet" href="test.css">
</head>
<div class="button">click</div>

有点短;-) 如果……无法正常工作，请给我写信...

Answer 2

动态加载CSS并不是一个好习惯，而是应该首先加载它并使用ID或名称来控制启用或禁用的内容

Answer 3

您不必完全从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属性禁用，Unity version属性。但有一点需要注意：上述对象仅在加载和解析外部CSS文档时创建。在此之前，linkEl.sheet为null;因此检查。

请注意更简单的版本：

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

...也有效（您更改了相应HTMLLinkElement的属性，禁用了它），但有一个微妙的错误：即使资源未准备就可以更改此属性 。因此想象一下用户点击按钮，之后看不到任何变化（CSS尚未加载）。现在他们再次单击该按钮，这次禁用链接 - 当资源在那里时，它不会显示。用户~~茫然和~~混淆，而且通常不好。

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

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

3 个答案: