当前位置：文江博客话题详情

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

发布于 2024-08-20 22:05:38 字数 425 浏览 5 评论 0原文

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

我想知道的两个原因：

我看到了几个问题，其中有人想知道如何获取由样式表为选择器设置的样式属性，而不是选择器最终继承的样式属性。
如果 Sizzle 做了它应该做的事情，这可能是确保样式表正确呈现的解决方案跨浏览器。基本上让 jquery 解析样式表并手动设置所有属性（可能基于浏览器或已知未实现的选择器。）这样设计者/开发人员只需编写向前兼容的 CSS3 样式表，并让 jquery/sizzle 完成浏览器赢得的工作't。

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

芯好空 2024-08-27 22:05:39

有趣的问题。 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'});

Interesting question. There is a jquery parser over at Daniel Wachsstock's site. http://bililite.com/blog/2009/01/16/jquery-css-parser/

Unfortunately it may not be what you are searching for...but it's worth a try. The following description is taken from his site:

In jQuery you call $(selector).parsecss(callback)

which scans all and elements in $(selector) or its descendents, parses each one and passes an object (details below) to the callback function.

For instance create a CSS file:

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

and you get

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

回复收藏 0 原文

智商已欠费 2024-08-27 22:05:38

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

假设您有一个以

<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 开头的 HTML 页面，其中包含以下行：

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

Then，为了找到 #pagebackground-color 的设置内容code>，您需要编写 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 字符，唯一可靠的方法是查看文件本身，据我所知。

此处提供了样式表对象的参考。

On the client-side, a stylesheet is already an object; it gets parsed into a tree when the page loads.

Lets say you have an HTML page starting with

<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"/>

and global.css contains the lines

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

Then, in order to find what's set for background-color of #page, you'd need to write document.styleSheets[0].cssRules[0].style.backgroundColor, which would return #fff (or rgb(255, 255, 255) on some browsers, I think).

Other useful stuff assuming the above sheets:

document.styleSheets[0].cssRules[3].cssText //"#sidebar { margin-right: 12px; }"
document.styleSheets[0].cssRules[2].selectorText //"#main"

If you had a more complex selector, like #main div.header a, #main div.header a:visited, then the selector text property returns the entire thing, not just the first bit.

Your specific question is "How can I find out what is set in the stylesheet for a given selector". Here's one way to approximate it:

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

The thing is that the CSS tree you have access to in this way has already been parsed by the browser (hence the 'approximate' above). If you're in Firefox, you won't see any -webkit styles because mozilla just drops them. Various browsers also tend to have their own way of displaying colors (as above; if your actual .css file has a given color set to #fff, and you check it in JavaScript after it's parsed, you might get back #fff, #ffffff or rgb(255, 255, 255)).

The above will tell you what your browser sees that CSS sheet as; if you want to know what specific ascii characters were contained in the initial .css file, the only reliable way is to look at the file itself, AFAIK.

A reference for the stylesheet object is available here.

回复收藏 0 原文

~没有更多了~