代码之家 › 专栏 › 技术社区 › Anthony

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

sizzle stylesheet css jquery

7

Anthony · 技术社区 · 14 年前

对于一个Javascript框架(如jquery)来说,是否已经有了一个标准或可靠的方法来将样式表解析为一个对象?

我想知道的两个原因是:

我看到了一些问题,有些人想知道如何获取样式表为选择器设置的样式属性,而不是选择器最终继承了什么。
如果 Sizzle 做它应该做的,这可能是一个解决方案,以确保样式表得到正确的跨浏览器渲染。基本上让jquery解析样式表并手动设置所有属性(可能基于浏览器或已知的未实现的选择器),这样设计人员/开发人员只需编写一个向前兼容的css3样式表,让jquery/sizzle完成浏览器无法完成的工作。

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

2 回复 | 直到 13 年前

1

11

Inaimathi 14 年前

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

假设您有一个以

<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 ,则Selector文本属性返回整个内容,而不仅仅是第一位。

您的具体问题是“我如何才能找出在样式表中为给定选择器设置的内容”。下面是一种近似方法:

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树已经被浏览器解析(因此上面的“近似值”)。如果你在火狐,你不会看到任何 -webkit 样式,因为Mozilla只会丢弃它们。各种浏览器也有自己的显示颜色的方式(如上所述;如果您的实际.css文件的给定颜色设置为 γ-FFF ,然后在分析完它之后在javascript中检查它,您可能会返回 #自由流速度 ,请 #ffffff 或 rgb(255, 255, 255) )

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

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

2

0

mre 14 年前

有趣的问题。Daniel Wachsstock的网站上有一个jQuery解析器。 http://bililite.com/blog/2009/01/16/jquery-css-parser/

不幸的是,这可能不是你想要的……但值得一试。以下描述摘自他的网站:

在jquery中,您调用 $(selector).parsecss(callback)

它扫描$(selector)或其子代中的所有和元素,解析每个元素,并将一个对象(详细信息如下)传递给回调函数。

例如,创建一个CSS文件:

.gallery a {
  -jquery-lightbox: {overlayBgColor: '#ddd'}
}

你得到

$('.gallery a').lightbox({overlayBgColor: '#ddd'});