Menu
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.
997
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.
132
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
