Question

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

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

如果加载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。我不知道它的质量。
要将这些样式作为<style>元素的内容添加到DOM，并在其上设置style.disabled = true，以使其规则不会影响当前内容。

是否有相当于css样式的eval？

2 个答案: