将CSS规则获取到javascript变量中

Question

我希望能够使用JavaScript或jQuery选择大块CSS规则并将它们放入变量中，基本上就像您期望的样式表中的预格式化文本一样。

理想情况下，我们会仔细地注释我们的CSS样式，并将它们简单地放在html页面的<head> <style>标记中。 JavaScript将在页面的<style>标记内找到将规则包装起来的特定注释，并将这些规则复制为文本变量，以备后用。

/* CSS Rules */

.example{
    font-size: 1em;
    color:blue;
}

/* end */

在这种情况下，脚本将找到字符串/* CSS Rule */ ，然后选择其下方的所有行，直到遇到终止注释/* end */

有任何想法吗？ 我已经在谷歌上搜索了很多解决方案，但是猜想这是一件很不寻常的事情，很难找到任何指针。

Answer 1

Welp ...您可能总是在您的样式标签上有一个id

<style id="css">div{ background-color:red; }</style>

然后用jQuery获取内容

var cssText = $('#css').html();

但是，这一切会使Ada Lovelace哭泣，也许您可以找到另一种满足您需求的方法？

Answer 2

有点古怪，但这是实现此目的的一种方法-

提取文本（使用regex或indexOf）-假设您有文本块，请从中创建一个数据uri：

var cssURL = "data:text/css;charset=utf8," + encodeURIComponent(cssTxt);

创建一个link元素并将rel设置为样式表（浏览器能够处理类型）：

var link = document.createElement("link");
link.rel= "stylesheet";
link.href = cssURL;

添加到标题以加载和解析：

document.getElementsByTagName("head")[0].appendChild(link);

例

只有绿色应该显示-

 var css = ".s1 {border:1px solid red} " + "/* start */ .s2 {border:1px solid green} /* end */ " + ".s3 {border:1px solid blue}"; // get css text and convert to data-uri var start = css.indexOf("/* start */"); var end = css.indexOf("/* end */", start); var cssTxt = css.substring(start, end); var cssURL = "data:text/css;charset=utf8," + encodeURIComponent(cssTxt); // create link element and add to header var link = document.createElement("link"); link.rel= "stylesheet"; link.href = cssURL; document.getElementsByTagName("head")[0].appendChild(link);

 <div class="s1">Class s1 - ignored</div> <div class="s2">Class s2 - should have green border</div> <div class="s3">Class s3 - ignored</div>

将CSS规则获取到javascript变量中

问题描述

2 个解决方案

解决方案1
2 2015-05-29 00:25:24

解决方案2
0

例

将CSS规则获取到javascript变量中

问题描述

2 个解决方案

解决方案1 2 2015-05-29 00:25:24

解决方案2 0

例

解决方案1
2 2015-05-29 00:25:24

解决方案2
0