是否已经有标准或可靠的方法供 javascript 框架(例如 jquery)将样式表解析为对象？
我想知道的两个原因:
我看到几个问题，其中有人想知道如何获取样式表为选择器设置的样式属性，而不是选择器最终继承的样式属性。
如果Sizzle做它应该做的，这可能是确保样式表在跨浏览器中正确呈现的解决方案。基本上让 jquery 解析样式表并手动设置所有属性(可能基于浏览器或已知未实现的选择器。)这样设计者/开发人员只需编写一个向前兼容的 CSS3 样式表并让 jquery/sizzle 完成浏览器赢得的工作't.
我看到的唯一缺点是这仍然不会实现 CSS3 属性，但这是一个开始。
最佳答案
在客户端，样式表已经是一个对象；当页面加载时，它会被解析成一棵树。
假设您有一个以
开头的 HTML 页面<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="/styles/global.css" rel="stylesheet" type="text/css" media="screen"/>
<link href="/styles/catalog.css" rel="stylesheet" type="text/css" media="screen"/>
<link href="/styles/banner.css" rel="stylesheet" type="text/css" media="screen"/>
和 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 设置的内容，您需要编写 document.styleSheets[0].cssRules [0].style.backgroundColor，它会返回 #fff(我认为在某些浏览器上会返回 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 中检查它，您可能返回 #fff、#ffffff 或 rgb(255, 255, 255))。
以上将告诉您浏览器将 CSS 表视为什么；如果您想知道初始 .css 文件中包含哪些特定的 ascii 字符，唯一可靠的方法是查看文件本身，AFAIK。
样式表对象的引用可用here .
关于jquery - CSS 解析器/抽象器？如何将样式表转换为对象，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/2226869/