您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

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

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

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

假设您有一个

<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#ffffffrgb(255, 255, 255))。

上面的内容将告诉您浏览器将CSS表单视为什么;如果您想知道初始.css文件中包含哪些特定的ascii字符,唯一可靠的方法是查看文件本身AFAIK。

CSS 2022/1/1 18:21:47 有409人围观

撰写回答


你尚未登录,登录后可以

和开发者交流问题的细节

关注并接收问题和回答的更新提醒

参与内容的编辑和改进,让解决方法与时俱进

请先登录

推荐问题


联系我
置顶