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

前端之家收集整理的这篇文章主要介绍了jquery – CSS解析器/抽象符?如何将样式表转换为对象前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
是否有一个标准或可靠的方法已经存在 javascript框架,如jquery将样式表解析为对象?

我想知道为什么有两个原因:

>我看过几个问题,有人想知道如何获取样式表为选择器设置的样式属性,而不是选择器最终继承的样式属性.
>如果Sizzle能够达到预期效果,那么这可能是确保样式表能够跨浏览器正确呈现的解决方案.基本上jquery解析样式表并手动设置所有属性(可能基于浏览器或已知的未实现的选择器.)这样设计人员/开发人员只需编写一个向前兼容并具有jquery / sizzle的CSS3样式表来完成浏览器赢得的工作“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的背景颜色设置的内容,你需要编写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,#fffffff或rgb(255,255,255)).

以上将告诉您浏览器看到的CSS表格是什么;如果你想知道最初的.css文件中包含哪些特定的ascii字符,唯一可靠的方法是查看文件本身,AFAIK.

样式表对象的引用可用于here.

猜你在找的jQuery相关文章