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

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

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

我喜欢这个解决方案，因为我想要删除的样式表具有相同的名称但位于不同的文件夹中。但是这段代码不起作用，所以我将操作符更改为*=，它运行正常：

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

以为我会分享这个，以防它对某人有用。

Answer 4

可能不是很优雅，但有一种方法可以给猫皮肤！（或a rabbit，如果那不是你的事情！）

这使用jQuery来操作document.styleSheets：

$.each($.grep(document.styleSheets, function(n) {
    return n.href.search(/searchRegex/) != -1;
}), function(i, n) {
    n.disabled = true;
});

这将禁用任何包含＆＃34; searchRegex＆＃34;的样式表。在URL中。（请参阅str.search()和regular expressions。）

很容易将其更改为纯JavaScript。移除$.each()和$.grep()，转而使用简单的for-loop：

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

Answer 5

这将重置页面的样式，删除所有样式元素。此外，不需要jQuery。

<input>

Answer 6

这是为了禁用html中的所有<style>

// this disable all style of the website...
var cant = document.styleSheets.length
for(var i=0;i<cant;i++){
    document.styleSheets[i].disabled=true;
}

//this is the same disable all stylesheets
Array.prototype.forEach.call(document.styleSheets, function(element){
  try{
    element.disabled = true;
  }catch(err){}
});

Answer 7

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

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

（“ $ =”以在href的末尾找到）

Answer 8

要在Damien's answer上进行扩展，test方法（返回true或false）可能比search更合适，并且速度稍快。使用此方法将产生：

for (var i = 0; i < document.styleSheets.length; i++) {
    if (/searchRegex/.test(document.styleSheets[i].href)) {
        document.styleSheets[i].disabled = true;
    }
}

如果您不关心IE支持，则可以使用for ... of循环进行清理

for (const styleSheet of document.styleSheets) {
    if (/searchRegex/.test(styleSheet)) {
        styleSheet.disabled = true;
    }
}

Answer 9

假设您要删除一个类myCssClass，那么最简单的方法就是element.classList.remove（＆＃34; myCssClass＆＃34;）;

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

9 个答案: