我可以通过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中。 所以这是一个部分策略：
-
将html文档中的每个内联样式replace为相应的“nStyle”，例如<span class =“cls1”nStyle =“color：red; nref：#myid; foo：bar”> … </ span>
-
加载页面时，对每个元素节点执行以下操作：（a）将nStyle属性的值复制到标记的cssText中，同时（b）将非标准属性转换为更简单的格式，例如，node.getAttribute（'nStyle'）成为对象{“nref”：“＃myid”，“foo”：“bar”}。
-
写一个“calculatedStyle”函数，可以获得样式或nStyle，取决于可用的。
为样式表写一个粗略的分析器可能会为他们启用类似的策略，但是我有一个问题：如何在没有来自Firefox的审查的情况下阅读样式表的障碍？
一种方法当然是在Javascript中编写自己的CSSparsing器。 但是我相信这真的是最重要的。
也许你可以试试LESS 。 这是dynamic样式表语言，您可以创build非标准的CSS属性，稍后编译的命令。
