是否有等效于 css 样式的 eval ？答案

【问题标题】：Is there an equivalent of eval for css styles?是否有等效于 css 样式的 eval ？
【发布时间】：2016-03-09 04:01:01
【问题描述】：

我有一个从外部资源加载的样式元素，我想应用它的样式而不将其内联。

例如 <link rel="stylesheet" type="text/css" href="my.css" /> 将加载一个 css 文件并应用它的规则而不将其内联，<script src="zepto.js"></script> 将对 javascript 执行相同的操作。

如果你加载了一个外部的 js，你可以使用 eval() 来评估它，即使这不受欢迎。

但是当加载一个外部样式时，除了将它添加到 dom 之外，我不知道如何评估它。

那么样式是否有类似 eval 对脚本的功能？有谁知道获得相同效果的好方法？

只要样式不出现在 dom 中，什么都可以。

【问题讨论】：

stackoverflow.com/a/10457877/4774263 看看这个答案，您可以通过 Jquery 加载您的样式，只需将您的样式附加到头部
为什么不想把样式表放到 DOM 树中呢？你想避免污染它吗？
“如何评估” 评估的预期结果是什么？是否要在将 css 文本附加到 DOM 之前添加或删除部分 css 文本？
评估的预期结果与使用链接元素从外部链接样式表一样。
@BoltClock 不确定 OP 是否正在尝试 1) 在附加到 DOM 之前修改 css 文本； 2) 以styleSheet 或其他对象的形式访问css 文本； 3) 在document 中查看应用css 文本，而不使用当前document ?

标签： javascript css eval

【解决方案1】：

您需要创建一个style 标记添加到head，然后将您的完整css 内容设置为innerHTML。

例如：

var style = document.createElement('style');
style.type = 'text/css';
document.getElementsByTagName('head')[0].appendChild(style);

//here is the magic.
style.innerHTML = 'put the css content'; 
//Ex: style.innerHTML = '.cssClass { color: #F00; }';

【讨论】：

这就是 OP 所说的：“但是当加载外部样式时，除了将其添加到 dom 之外，我不知道如何评估它。”他们不想要这个。
如果我没记错的话，要求是动态生成/加载的 css 内容必须应用于页面（eval）并且css 代码不应显示在页面中。
另外 OP 说：“只要样式适用而不出现在 dom 中，一切都很好。”
@RoyalPinto "如果我没记错的话，要求是动态生成/加载的 css 内容必须应用于页面（ eval ）并且 css 代码不应该出现在页面。" document.getElementsByTagName('head')[0].appendChild(style) 是否将 css 文本附加到 DOM ？
@guest271314：它将样式元素附加到 DOM（从前两行代码可以看出）。出于某种原因，这是 OP 试图避免的。

【解决方案2】：

你有两个选择：

JavaScript CSS 解析器。例如 Node.js 有纯 JS CSS 解析器，例如检查 http://github.com/reworkcss/css。不过我不知道它的质量。
将这些样式作为<style> 元素的内容添加到DOM 并在其上设置style.disabled = true，使其规则不会影响当前内容。

【讨论】：

#2 与 OP 试图完成的相反。 OP确实希望CSS生效，但不想通过样式元素将它们添加到DOM。
@BoltClock 啊，那……那是不可能的。 CSS 具有特殊性的概念，其中一个组成部分是样式包含在 DOM 中的位置。因此，您不能有悬挂样式。完全没有。
是的，如果浏览器对作者级别样式的实现严格来自元素或