CSS parser/abstracter? How to convert stylesheet into object

问题

Is there a standard or reliable method already out there for a javascript framework such as jquery to parse a stylesheet into an object?

Two reasons for why I'm wondering:

I have seen a couple of questions where someone wanted to know how to get the style attribute that was set by the stylesheet for a selector, not what the selector eventually inherited.
If Sizzle does what it is supposed to, this could be a solution for making sure a stylesheet got rendered correctly cross-browser. Basically have jquery parse the stylesheet and set all of the attributes manually (maybe based on browser or known unimplemented selectors.) that way the designers/developers just write a CSS3 stylesheet that is forward compatible and have jquery/sizzle do the work the browser won't.

The only downside I see is that this still won't implement CSS3 attributes, but it's a start.

回答1:

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.

回答2:

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

来源：https://stackoverflow.com/questions/2226869/css-parser-abstracter-how-to-convert-stylesheet-into-object

标签

jquery

css

stylesheet

sizzle