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');

使用此fiddle

进行实验

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

2 个答案: