ansaurus

Question

CSS parser/abstracter? How to convert stylesheet into object

Answer 1

A:

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

mre 2010-02-10 16:19:25

Answer 2

+2 A:

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"&gt; 
  <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.

Inaimathi 2010-03-07 03:53:42

ansaurus

tags:

views:

answers:

CSS parser/abstracter? How to convert stylesheet into object

related questions