如何从标题中删除 CSS

Question

我知道如何使用 JS 将 css 元素添加到标题中，但如何删除一个？

加上 ：

var style = document.createElement('style');
style.type = 'text/css'; 
style.innerHtml = ".item {color:red}";
document.getElementsByTagName('head')[0].appendChild(style);

我的问题是如何删除元素，我试过了

document.getElementsByTagName('head')[0].removeChild(style);

它抛出一个错误，我想删除 css 并且如果它不存在则不抛出错误。

非常感谢您的帮助。

我不想使用 JQuery。

我使用的基于 Daniels 的实际解决方案是：-

        var DeskTag = document.getElementById('style');

        if (DeskTag!=null) {
            document.getElementsByTagName('head')[0].removeChild(DeskTag);
        }

Answer 1

你可以给它一个 id 并直接访问它：

style.id = 'style-tag'

const styleTag = document.getElementById('style-tag');
if (!styleTag) return;
document.getElementsByTagName('head')[0].removeChild(styleTag);

Answer 2

这个问题的答案就像您执行以下操作一样简单：而不是使用 .removeChild(style);

首先让我们模拟我们添加的样式：

    var style = document.createElement('style');
    style.type = 'text/css'; 
    style.innerhtml = ".item {color:red}";
    document.getElementsByTagName('head')[0].appendChild(style);

然后让我们删除它：

function removeStyle(){
  style.innerHTML = ""; // you just need to reset the style as it was: blank
  document.getElementsByTagName('head')[0].appendChild(style);
}
removeStyle();

如果这不起作用，我希望它能让您了解您可以做什么。

Answer 3

如果只有一个“样式”标签，请使用

document.querySelector('style').remove()

如果可能有一堆，请为每个添加一个类：

const style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = ".item {color:red}";
style.classList.add('style_to_delete')
document.getElementsByTagName('head')[0].appendChild(style);
document.querySelector('.style_to_delete').remove()