如何从当前页面动态删除样式表

Question

有没有办法从页面动态删除当前样式表？

例如,如果页面包含:

<link rel="stylesheet" type="text/css" href="http://..." />

...有没有办法稍后用JavaScript禁用它？使用jQuery的额外点.

Answer 1

好吧,假设您可以使用jQuery来定位它,它应该像调用remove()元素一样简单:

$('link[rel=stylesheet]').remove();

这将删除页面上的所有外部样式表.如果你知道网址的一部分,那么你可以删除你正在寻找的那个:

$('link[rel=stylesheet][href~="foo.com"]').remove();

并在Javascript中

这是使用查询选择器和foreach数组删除所有内容的示例

Array.prototype.forEach.call(document.querySelectorAll('link[rel=stylesheet]'), function(element){
      try{
        element.parentNode.removeChild(element);
      }catch(err){}
    });

//or this is similar
var elements = document.querySelectorAll('link[rel=stylesheet]');
for(var i=0;i<elements.length;i++){
    elements[i].parentNode.removeChild(elements[i]);
}

Answer 2

如果您知道样式表的ID,请使用以下命令.当然,任何其他获取样式表的方法都可以.这是直接的DOM,不需要使用任何库.

var sheet = document.getElementById(styleSheetId);
sheet.disabled = true;
sheet.parentNode.removeChild(sheet);

Answer 3

这将禁用与针对每个样式表的 URL 提供的正则表达式匹配的任何样式表。 searchRegEx

let searchRegEx = /example.*/;

for (var i = 0; i < document.styleSheets.length; i++) {
    if (document.styleSheets[i].href.search(searchRegEx) != -1) {
        document.styleSheets[i].disabled = true;
    }
}

Answer 4

我找到了这个页面,同时寻找一种方法来使用jquery删除样式表.当我读到以下内容时,我以为我找到了正确的答案

如果你知道网址的一部分,那么你可以删除你正在寻找的那个: $('link[rel=stylesheet][href~="foo.com"]').remove();"

我喜欢这个解决方案,因为我想要删除的样式表具有相同的名称但位于不同的文件夹中.但是这段代码没有用,所以我把操作符改为了*=,它运行得很完美:

$('link[rel=stylesheet][href*="mystyle"]').remove();

只是想我会分享这个,以防它对某人有用.

Answer 5

没有人提到在纯 Javascript 中删除没有 ID 的特定样式表：

 document.querySelector('link[href$="something.css"]').remove()

（“$=”在 href 末尾查找）