1. 首页
  2. 问题
  3. CSS解析器/抽象器？如何将样式表转换为对象
小编典典

CSS解析器/抽象器？如何将样式表转换为对象

css

是否已有标准或可靠的方法用于javascript框架（例如jquery）将样式表解析为对象？

我想知道的两个原因：

  1. 我看到了几个问题，有人想知道如何获取样式表为选择器设置的样式属性，而不是选择器最终继承的属性。

  2. 如果Sizzle做到了预期的目标，那么这可能是确保样式表跨浏览器正确呈现的一种解决方案。基本上让jquery解析样式表并手动设置所有属性（可能基于浏览器或已知的未实现的选择器。）这样，设计人员/开发人员只需编写向前兼容的CSS3样式表，并让jquery / izzl来完成浏览器的工作没错

我看到的唯一缺点是，这仍然不会实现CSS3属性，但这只是一个开始。


阅读 676

收藏
2020-05-16

共1个答案

小编典典

在客户端，样式表已经是一个对象。页面加载时，它将解析为树。

假设您有一个以

<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; }

然后，为了找到什么设置background- color的#page，你需要写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。

2020-05-16