将 id 添加到 html 样式标签会导致问题吗？答案

【问题标题】：Will adding an id to a html style tag cause issues?将 id 添加到 html 样式标签会导致问题吗？
【发布时间】：2022-02-11 00:54:31
【问题描述】：

我有一个 javascript 应用程序，出于某些不明原因，我需要：

将样式注入我的 html 头部
稍后从我的 html 头中删除这些样式

我现在的简化设置是这样的......

注入<style ...>标签：

const css = `
  * {
    outline: 2px dashed lime;  
  }
`;

const styleEl = document.createElement('style');

styleEl.id = 'myid';

document.head.appendChild(styleEl);

styleEl.appendChild(document.createTextNode(css));

还有一次我想再次删除这些样式，使用我分配的 id 来标识<style ...> 标签，因为很多其他样式节点都在头部：

const styleElement = document.getElementById('myid');

if (styleElement && styleElement.parentNode) styleElement.parentNode.removeChild(styleElement);

我认为<style ...> 标签上的id 不是有效的HTML。但也想不出另一种优雅的方式来解决这个问题。在这种情况下我不能使用内联样式，因为样式应该应用整个文档（实际上是针对注入的 iframe）。

非常感谢您的想法和帮助！

【问题讨论】：

我很好奇这些晦涩的原因可能是什么。但是，这个答案可能会有所帮助 - stackoverflow.com/a/524798/13168911
您可以保留对已创建元素的引用（JS 变量），并在以后使用它来删除它。但是是什么让你认为在样式标签中添加 id 是无效的 HTML？
谢谢@Noam！你是对的，这就是我将设置它的方式。而且您对 id 的看法也是正确的；该元素包括全局属性，id 也是其中之一。我只是之前没有在样式标签上看到任何这些属性，所以做出了错误的假设！
也感谢安德鲁。简短的版本是我有一个外部 iframe，它在正文的末尾添加了另一个元素，我不能给它一个类或内联样式。所以我想对 iframe 应用某些样式，但在离开应用程序的那部分时不想摆脱这种样式。
如果是这样的话，我认为它不会起作用。父框架的样式表不会影响 iframe 中的元素，并且您无法操作 iframe 的 DOM，除非它与您的页面来自同一来源。您可以将 width 和 background 之类的样式应用于 iframe 元素本身，但这也可以通过内联样式来完成。

标签： javascript html css dom

【解决方案1】：

您不必再次通过 id 获取它。你有它在styleEl 变量中，所以只需将它从 DOM 中删除，如下所示：

styleEl.remove(); // remove it from the DOM

您可以重复执行此操作。追加和删除。

【讨论】：