将CSS规则放入javascript变量中

Get CSS rules into javascript variable

本文关键字：javascript 变量 CSS 规则      更新时间：2023-09-26

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

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

/* CSS Rules */
.example{
    font-size: 1em;
    color:blue;
}
/* end */

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

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

…你可以在你的样式标签上加上一个id，比如

<style id="css">div{ background-color:red; }</style>
然后用jquery抓取内容 
var cssText = $('#css').html();

但这整件事会让Ada Lovelace哭泣，也许你能找到另一种方式来满足你的要求?

这有点俗气，但有一种方法可以做到这一点——

提取文本(使用regex或indexOf) -假设您有文本块，从中创建一个数据uri:

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

创建一个链接元素，并设置rel为stylesheet(浏览器能够处理类型):

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

添加到header中以加载和解析:

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>

相关文章：