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

我正在尝试读取一个自定义(非标准)的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”或其他)。

Firefox不会将从代码无法理解的标签,属性或CSS样式inheritance到DOM。 这是devise。 Javascript只能访问DOM,而不是代码。 所以不,没有办法从浏览器本身不支持的JavaScript访问属性。

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

通过阅读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文档中的每个内联样式replace为相应的“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中编写自己的CSSparsing器。 但是我相信这真的是最重要的。

也许你可以试试LESS 。 这是dynamic样式表语言,您可以创build非标准的CSS属性,稍后编译的命令。