SitePoint Sponsor |
|
User Tag List
Results 1 to 3 of 3
-
May 16, 2008, 04:27 #1
- Join Date
- Aug 2007
- Location
- Brighton, UK
- Posts
- 2,006
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Processing a StyleSheet using JavaScript??
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]; }
I hope what I've said is understandable.
Can anybody help?★ James Padolsey
–––––––––––––––––––––––––––––––––––––––
Awesome JavaScript Zoomer (demo here)
'Ajaxy' - Ajax integration solution (demo here)
-
May 16, 2008, 08:26 #2
- Join Date
- Oct 2004
- Location
- Birtley, UK
- Posts
- 2,439
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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
-
May 16, 2008, 09:24 #3
- Join Date
- Aug 2007
- Location
- Brighton, UK
- Posts
- 2,006
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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★ James Padolsey
–––––––––––––––––––––––––––––––––––––––
Awesome JavaScript Zoomer (demo here)
'Ajaxy' - Ajax integration solution (demo here)
Bookmarks