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

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.但是,您可以使用内容属性,因为它仅用了效果 :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访问属性.