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

Can I fetch the value of a non-standard CSS property via Javascript?

本文关键字：属性 CSS 非标准 可以通过 Javascript 获取      更新时间：2023-09-26

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

#someElement {
  foo: 'bar';
}

我已经设法用IE7:中的currentStyle属性获得了它的值

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

但currentStyle是MS特有的。所以我在Firefox3和Safari3:中尝试了getComputedStyle（）

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

并且返回undefined有人知道跨浏览器检索自定义CSS属性值的方法吗

（正如您可能已经注意到的，这不是有效的CSS。但只要值遵循正确的语法，它就应该有效。更好的属性名称应该是"-myNameSpace foo"之类的。）

现代浏览器只会丢弃任何无效的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/

Firefox不会将它不理解的标签、属性或CSS样式从代码转移到DOM。这是故意的。Javascript只能访问DOM，而不能访问代码。因此，没有办法从javascript访问浏览器本身不支持的属性。

通过在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');
}

它的代码很难看，但你明白了。

我也有一些页面在MSIE中工作得很好，但在样式和样式表中有很多信息。所以我在考虑变通办法。幸运的是，Firefox允许将内联属性放入DOM中。所以这里有一个部分策略：

  1. 将html文档中的每个内联样式替换为相应的"nStyle"，例如。，<span class="cls1"nStyle="color:red；nref:#myid；foo:bar"><span>

  2. 加载页面时，对每个元素节点执行以下操作：（a）将nStyle属性的值复制到标记的cssText中，同时（b）将非标准属性转换为更简单的格式，例如node.getAttribute（'nStyle'）成为对象｛"nref"："#myid"，"foo"："bar"｝。

  3. 编写一个"calculatedStyle"函数，根据可用的内容获取样式或nStyle。

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

当然，一种方法是用Javascript编写自己的CSS解析器。但我相信这真的是太过分了。

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

相关文章：