CSS解析器/抽象符？ 如何将样式表转换为对象
是否有一个标准或可靠的方法已经存在javascript框架，如jquery将样式表解析为对象？
我想知道为什么有两个原因：
-
我看过几个问题，有人想知道如何获取样式表为选择器设置的样式属性，而不是选择器最终inheritance的样式属性。
-
如果Sizzle做了它应该做的事情，这可能是确保样式表能够跨浏览器正确呈现的解决方案。 基本上jquery解析样式表并手动设置所有属性（可能基于浏览器或已知的未实现的选择器。）这样设计人员/开发人员只需编写一个向前兼容并具有jquery / sizzle的CSS3样式表来完成浏览器赢得的工作“T。
我看到的唯一缺点是，这仍然不会实现CSS3属性，但它是一个开始。
在客户端，样式表已经是一个对象; 页面加载时会将其解析为树。
假设您有一个HTML页面
和global.css包含行
#page { background-color: #fff; margin-top: 20px; margin-bottom: 20px; text-align: left; width: 100%; margin-top: 20px; padding: 0px; min-width: 900px; border: none; } #header { background-color: transparent; } #main { background-color: transparent; margin-left: 10px; margin-right: 10px; padding: 8px 0px 8px 0px;} #sidebar { margin-right: 12px; }
然后，为了找到为#page background-color设置的#page ，你需要编写document.styleSheets[0].cssRules[0].style.backgroundColor ，它将返回document.styleSheets[0].cssRules[0].style.backgroundColor （或rgb(255, 255, 255)在某些浏览器上，我认为）。
其他有用的东西假设上面的表：
document.styleSheets[0].cssRules[3].cssText //"#sidebar { margin-right: 12px; }" document.styleSheets[0].cssRules[2].selectorText //"#main"
如果你有一个更复杂的选择器，比如#main div.header a, #main div.header a:visited ，那么选择器文本属性将返回整个东西，而不仅仅是第一位。
您的具体问题是“如何找出给定选择器的样式表中设置的内容”。 这是近似它的一种方法：
function findProperty(selector) { rules = document.styleSheets[0].cssRules for(i in rules) { if(rules[i].selectorText==selector) return rules[i].cssText; } return false; } findProperty('#sidebar'); //returns "#sidebar { margin-right: 12px; }"
问题在于，您以这种方式访问的CSS树已经被浏览器解析（因此上面的“近似”）。 如果你在Firefox中，你将看不到任何-webkit样式，因为mozilla只是放弃它们。 各种浏览器也倾向于有自己的显示颜色的方式（如上所述;如果你的实际.css文件的给定颜色设置为#fff ，你在解析后用JavaScript检查它，你可能会回来#ffffff #fff ， #ffffff或rgb(255, 255, 255) ）。
以上将告诉您浏览器看到的CSS表格是什么; 如果你想知道最初的.css文件中包含哪些特定的ascii字符，唯一可靠的方法是查看文件本身，AFAIK。
此处提供了样式表对象的参考。
有趣的问题。 Daniel Wachsstock的网站上有一个jquery解析器。 http://bililite.com/blog/2009/01/16/jquery-css-parser/
不幸的是，它可能不是你正在寻找的…但它值得一试。 以下描述取自他的网站：
在jQuery中你调用$(selector).parsecss(callback)
它扫描$（选择器）或其后代中的所有元素和元素，解析每个元素并将对象（下面的详细信息）传递给回调函数。
例如，创建一个CSS文件：
.gallery a { -jquery-lightbox: {overlayBgColor: '#ddd'} }
你明白了
$('.gallery a').lightbox({overlayBgColor: '#ddd'});