有没有什么技术可以通过CSS规则将任意文本传递给JavaScript？

Question

是否有任何CSS属性可以使用JavaScript可用于创建自定义增强功能的元数据重叠？ 或者是否有一些其他技术/黑客可用于从CSS到JavaScript的任意字符串？

具体用例是这样的：

• 用户提交的CSS用于主题静态标记。
• 一层JavaScript可以选择启用增强的嵌入式内容（例如图形或其他可视化），用户应该能够以各种方式设置此标记的样式。
• 示例：选择要合并的特定数据点，选择将要渲染的图表线/条的类型，创建特定形状的可视化。

这需要适用于所有现代浏览器和IE9及更高版本。 我还想避免在可能的情况下避免引入LESS的额外复杂性

Answer 1

也许在css文件中使用注释

/* define myUserData: "myUserValue" */

然后使用对文件的ajax调用来解析css文件。

这样的事情

jQuery.get("test.css", null, function(data) {
    var comments = data.match(/\/\* define.*\*\//g);
    for each (var c in comments) 
        alert(c);
});

这是一个额外的请求，但由于css文件通常在本地缓存（取决于服务器和客户端设置），因此对大多数用户来说这不是一个昂贵的请求。

Answer 2

另一种方法是使用一个永远不会应用声音的选择器，就像这样的东西可能对你的用例更有用。

但是，您需要遍历每个样式表的cssRules对象。

如果您知道样式表的href或者可以通过正则表达式匹配它，那么您只需解析该样式表即可。

/* css */
.this-is-config.variableName
{ 
      /* quotes works and is valid css */
      quotes:"circle";
      /* content works, but should only be for pseudo elements */
      content: "hey-hey";
      /* Some other rules will not work */
      color: "rouge";
}

为了获得价值

/* js */
function getConfig(variableName) {
    // search backwards because the last match is more likely the right one
    for (var s= document.styleSheets.length - 1; s >= 0; s--) {

        // if you know the href of the stylesheet you can continue here
        /*
        if (isNotTheRightStylesheet(document.styleSheets[s].href) ) {
          continue;
        }
        */

        // get all the rules in this stylesheet
        var cssRules = document.styleSheets[s].cssRules ||
                document.styleSheets[s].rules || []; // IE support            

        // find matching selector
        for (var c=0; c < cssRules.length; c++) {
            if (cssRules[c].selectorText === '.this-is-config.' + variableName) 
                return cssRules[c].style['quotes'];
        }
    }
    return null;
}

var value = getConfig('variableName');

在这里尝试这个小提琴