css 样式是否有等效的 eval？

Question

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

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

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

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

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

只要应用样式而不显示在 dom 中就可以了。

Answer 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; }';

Answer 2

您有两个选择：

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

css 样式是否有等效的 eval？

Is there an equivalent of eval for css styles?

javascript

css

eval