Javascript 访问CSS样式表'；在不向头部添加样式表的情况下删除规则

我用AJAX加载了一个样式表，该文件存储在数据变量中。现在我需要访问它的规则（它背后有一个功能）。我现在使用的解决方案是：

stylesheet = document.createElement('style');
stylesheet.type = 'text/css';
stylesheet.innerHTML = data;

document.head.appendChild(stylesheet);
stylesheet = document.styleSheets[2]; // I know which one is my file

rules = stylesheet.rules || stylesheet.cssRules;

现在的问题是，当它被添加到头部时，样式会应用到页面上。如何在不增加头部的情况下执行相同的操作

---

使用Object.create（CSSStyleSheet.prototype）尝试了各种方法，但无法完成…

我只需创建一个空的隐藏的

iframe

并在那里附加样式表。这样，它不会影响任何东西，您仍然可以阅读它的cssRules

例如：

stylesheet = document.createElement('style');
stylesheet.type = 'text/css';
stylesheet.innerHTML = data;

var iframe = document.createElement('iframe');
iframe.style.display = 'none';
document.body.appendChild(iframe);

var iframeDoc = iframe.contentWindow.document || iframe.contentDocument;
iframeDoc.body.appendChild(stylesheet);

stylesheet = iframeDoc.styleSheets[0];
rules = stylesheet.rules || stylesheet.cssRules;

---

演示：

我认为您可能希望将CSS样式设置为非常狭窄的特定样式，以便它们仅适用于您想要影响的HTML部分/元素（而不是整个页面），这是无法做到的。基本上，它是一个定制的引导样式，然后在管理面板中解析以编辑样式。问题是，管理面板也使用引导。因此，如果编辑并再次加载的文件具有不同的导航栏颜色，则也会影响管理员的导航栏。但我真的不需要它。设置为新创建的样式表，这样它就不会重新设置页面样式。禁用样式不起作用。@Julius它起作用，但您必须禁用附加的样式表，如果禁用未附加的样式表，它在所有浏览器中都没有效果。为什么？iFrame很酷，有时非常有用。就像在这个案例中。关于他们是否酷还有争议。。。有用的黑客？对酷？不远。。。（但我想每个人都有一个酷的定义）-好吧，在AJAX发明之前，它对许多有趣的事情都很酷，比如跨域通信和强大的AJAX传输，将数据提交给服务器，在FormData和XMLHttpRequest2之前上传AJAX文件。我同意它对于非常特定的用例的有用性。我不认为这很酷——对我来说，这就像是web开发的“GoTo”声明，虽然有时很有用，但可能是web应用程序设计糟糕的标志。。。在这种情况下——以及你指出的一些情况下——这可能是有用的，但我的蜘蛛感觉告诉我，有一种更好的方法