Question

我正在尝试读取自定义（非标准）CSS属性，在样式表（不是内联样式属性）中设置并获取其值。以此CSS为例：

#someElement {
  foo: 'bar';
}

我已经设法通过IE7中的currentStyle属性获取其值：

var element = document.getElementById('someElement');
var val = element.currentStyle.foo;

但是currentStyle是MS特有的。所以我在Firefox 3和Safari 3中尝试了getComputedStyle（）：

var val = getComputedStyle(element,null).foo;

...它返回undefined。 是否有人知道浏览自定义CSS属性值的跨浏览器方式？

（正如您可能已经注意到的，这不是有效的CSS。但只要值遵循正确的语法，它就应该工作。更好的属性名称将是“-myNameSpace-foo”或其他东西。）

Answer 1

现代浏览器只会丢弃任何无效的CSS。但是，您可以使用content属性，因为它只对其有效 :after，:before等。您可以在其中存储JSON：

#someElement {
    content: '{"foo": "bar"}';
}

然后使用这样的代码来检索它：

var CSSMetaData = function() {

    function trimQuotes( str ) {
         return str.replace( /^['"]/, "" ).replace( /["']$/, "" );   
    }

    function fixFirefoxEscape( str ) {
        return str.replace( /\\"/g, '"' );
    }

    var forEach = [].forEach,
        div = document.createElement("div"),
        matchesSelector = div.webkitMatchesSelector ||
                          div.mozMatchesSelector ||
                          div.msMatchesSelector ||
                          div.oMatchesSelector ||
                          div.matchesSelector,
        data = {};

    forEach.call( document.styleSheets, function( styleSheet ) {
        forEach.call( styleSheet.cssRules, function( rule ) {
            var content = rule.style.getPropertyValue( "content" ),
                obj;

            if( content ) {
                content = trimQuotes(content);
                try {
                   obj = JSON.parse( content );
                }
                catch(e) {
                    try {

                        obj = JSON.parse( fixFirefoxEscape( content ) );
                    }
                    catch(e2) {
                        return ;
                    }

                }
                data[rule.selectorText] = obj;
            }
        });

    });


    return {

        getDataByElement: function( elem ) {
            var storedData;
            for( var selector in data ) {
                if( matchesSelector.call( elem, selector ) ) {
                    storedData = data[selector];
                    if( storedData ) return storedData;

                }
            }

            return null;
        }
    };

}();
var obj = CSSMetaData.getDataByElement( document.getElementById("someElement"));
console.log( obj.foo ); //bar

请注意，这仅适用于现代浏览器。演示：http://jsfiddle.net/xFjZp/3/

Answer 2

Firefox不会带有从代码到DOM无法理解的标签，属性或CSS样式。那是设计上的。 Javascript只能访问DOM，而不能访问代码。所以不，没有办法从浏览器本身不支持的javascript访问属性。

Answer 3

通过阅读IE中的样式表信息，您可以获得这些“虚假”属性，但仅限于我所知道的IE中。

var firstSS = document.styleSheets[0];
var firstSSRule = firstSS.rules[0];
if(typeof(firstSSRule.style.bar) != 'undefined'){
  alert('value of [foo] is: ' + firstSSRule.style.bar);
} else {
  alert('does not have [foo] property');
}

它的丑陋代码，但你得到的图片。

Answer 4

我也有一些在MSIE中非常有效的页面，但在样式和样式表中有很多信息。所以我在考虑解决方法。有意思的是，Firefox确实允许将内联属性放入DOM中。所以这是一个部分策略：

将html文档中的每个内联样式替换为相应的“nStyle”，例如，＆lt; span class =“cls1”nStyle =“color：red; nref：#myid; foo：bar”＆gt; ......＆lt; / span＆gt;
加载页面时，请对每个元素节点执行以下操作：（a）将nStyle属性的值复制到标记的cssText中，同时（b）将非标准属性转换为更简单的属性格式，以便例如node.getAttribute（'nStyle'）成为对象{“nref”：“＃myid”，“foo”：“bar”}。
写一个“calculatedStyle”函数，它可以获得样式或nStyle，具体取决于可用的内容。

为样式表编写粗略的解析器可能会为他们制定类似的策略，但我有一个问题：如何在没有Firefox审查的情况下克服样式表的障碍？

Answer 5

一种方法当然是在Javascript中编写自己的CSS解析器。但我相信真的超过顶部。

Answer 6

也许你可以试试LESS。它是动态样式表语言，您可以创建非标准的css属性，稍后将编译的命令。

我可以通过Javascript获取非标准CSS属性的值吗？

6 个答案: