Processing a StyleSheet using JavaScript??

**JimmyP** · May 16, 2008, 04:27

Hello,

I am looking for a way to process a stylsheet using JavaScript.

Let's assume I have a string under the variable of "stylsheet". So all the content of the stylesheet is in a single string (This is where I've got to so far).

Now I need to process that string to seperate all the various rulesets.

So I would like to end up with an array of rulesets. So, for example... stylesheet[0] would be:

Code:

[selector] {
  [PropertyName1]: [Value];
  [PropertyName2]: [Value];
  [PropertyName3]: [Value];
}

So I want to seperate all rulesets and ignore any css comments (/*BLAH BLAH BLAH)*/). I also want it to ignore things like "@charset "utf-8";" or "@import" ... But this is a secondary objective so not too important.

I hope what I've said is understandable.

Can anybody help?

**gRoberts** · May 16, 2008, 08:26

Jimmy,

Doing what you want would take a lot of regex and validation. Purely because everyone writes their own CSS a different way etc.

I recall there being a javascript way of accessing the data you want. http://www.quirksmode.org/dom/getstyles.html

**JimmyP** · May 16, 2008, 09:24

It might be better if I tell you what I am trying to do.

Basically I've made a script which enhances the various code blocks on my page. It takes the content within each <pre> element and puts it into an ordered list with corresponding styles (defined in an external stylesheet).

Basically each <pre> element gets replaced with this basic structure:

Code HTML4Strict:

 
<div class="code">
   <ol>
       <li>//code here...</li>
       <li>//code here...</li>
       <li>//code here...</li>
   </ol>
</div>

One of the corresponding CSS declerations might be like this:

Code CSS:

 
div.code {
  padding: 10px;
}

So, the stylesheet and the script are linked to in the <head> of the document. It all works great up until specificity gets in the way!

Obviously I have other stylesheets with other rules. This is just fictional but hopefully you'll get the idea: - One of the other stylesheets has this rule in:

(note that all content within the html is surrounded by a div with an ID of "content")

Code CSS:

#content div {
   padding: 10px;
}

The rule above is has a higher specificity level than the "div.code" rule so the 10px padding is applied instead of the 20px.

I could fix this by making the codeblocks have IDs of "code" but it is likely that there will be multiple code blocks within a single page so IDs cannot be used ... Classes are the only option.

The other solution would be to somehow grab all the data from the stylesheet (via ajax) and go through each rule and apply it inline on the corresponding element thus making that the applied rule. - So 20px would work.. not 10px (on the padding example above)

I hope you understand...

Thanks

The SitePoint Forums have moved.

User Tag List

Thread: Processing a StyleSheet using JavaScript??

Thread Tools

Display

Processing a StyleSheet using JavaScript??

Bookmarks

Bookmarks

Posting Permissions