Question

当我使用以下内容渲染html片段时，我会动态添加特定的css文件。

loadCss("css/customCss.css");


function loadCss(href) {
  var cssLink = $("<link rel='stylesheet' type='text/css' href='" + href + "'>");
  $("head").append(cssLink);
}

如何删除文件路径引用为css/customCssLearning的css文件。

Answer 1

你需要禁用它，删除元素什么都不做。要通过href值选择元素，您需要使用属性选择器。

$('link[href="css/customCss.css"]')[0].disabled=true;

如果您要添加并“删除”它，您可能需要先检查它并重新启用它。

function loadCss(href) {    
    var sSheet = $('link[href="' + href + '"]');      
    if (sSheet .length) {
        sSheet[0].disabled = false;
    } else {
        var cssLink = $("<link rel='stylesheet' type='text/css' href='" + href + "'>");
        $("head").append(cssLink);
    }
}

运行示例：

function loadCSS(href) {
  var sSheet = $('link[href="' + href + '"]');
  if (sSheet.length) {
    sSheet[0].disabled = false;
  } else {
    var cssLink = $("<link rel='stylesheet' type='text/css' href='" + href + "'>");
    $("head").append(cssLink);
  }
}

function removeCSS(href) {
  $('link[href="' + href + '"]')[0].disabled = true;
}



$("button.add").on("click", function() {
  loadCSS("http://cdn.sstatic.net/stackoverflow/all.css");
});

$("button.remove").on("click", function() {
  removeCSS("http://cdn.sstatic.net/stackoverflow/all.css");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<h1>Hello</h1>
<div class="topbar">
  <div class="icon-achievements">
    <button class="add unread-count">Add</button>
    <button class="remove unread-count">Remove</button>
  </div>
</div>

Answer 2

我建议不要这样做。它没有任何好处！ CSS将在加载后立即加载到浏览器中，删除CSS链接不会更改已经渲染和缓存的网站。

动态添加和删除样式表

2 个答案: