Getting CSS property value

[Andrew Poulos]

If I know the name of an imported stylesheet, and I know the name of a
specific selector, and I know the name of the property, how can I get
the corresponding value? In the following case:

<style type="text/css">@import url(test.css);</style>

which contains (among other things)
..tester {
color: red;
}

I know the CSS is 'test.css', the selector is the class '.tester', and
the property is 'color'. I need to get the value, in this case 'red',
or, say, null if an error occurred.

Note that the style may not have actually been applied to anything on
the current page.
Andrew Poulos

[VK]

alert(document.styleSheets[0].imports[0].rules[0].style.color) for IE,
FF is out of luck, but actually the whole question is for a good style
authoring group, they also may have an FF-workaround.

[Martin Honnen]

VK wrote:

alert(document.styleSheets[0].imports[0].rules[0].style.color) for IE,
FF is out of luck,

No, it implements the DOM standard, there you could get at
document.styleSheets[0].cssRules[0].styleSheet.cssRules[0].style.color

--

Martin Honnen
http://JavaScript.FAQTs.com/

[Michael Winter]

On 31/05/2005 15:48, VK wrote:

alert(document.styleSheets[0].imports[0].rules[0].style.color) for IE,
FF is out of luck
Only because you're using proprietary properties. However, there are
other user agents for which this approach will never work.
but actually the whole question is for a good style
authoring group [...]

Why? Style sheet groups (and I only know of one) do not cover scripting
in any form. That is for this group.

Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.

[RobB]

Andrew Poulos wrote:

If I know the name of an imported stylesheet, and I know the name of a
specific selector, and I know the name of the property, how can I get
the corresponding value? In the following case:

<style type="text/css">@import url(test.css);</style>

which contains (among other things)
.tester {
color: red;
}

I know the CSS is 'test.css', the selector is the class '.tester', and
the property is 'color'. I need to get the value, in this case 'red',
or, say, null if an error occurred.

Note that the style may not have actually been applied to anything on
the current page.
Andrew Poulos

Someday this will be easy. Someday.

http://www.quirksmode.org/dom/changess.html

[Ivo]

"Andrew Poulos" wrote

If I know the name of an imported stylesheet, and I know the name of a
specific selector, and I know the name of the property, how can I get
the corresponding value? In the following case:

<style type="text/css">@import url(test.css);</style>

which contains (among other things)
.tester {
color: red;
}

I know the CSS is 'test.css', the selector is the class '.tester', and
the property is 'color'. I need to get the value, in this case 'red',
or, say, null if an error occurred.

Hopefully this can be of help:

function getcss( selector, property ) {
var i, r, s=document.styleSheets && document.styleSheets[0]; if(s) {
r = s.rules ? s.rules : s.cssRules; if(r) {
i = r.length; while (i--) {
if(r[i].selectorText.toLowerCase() === selector.toLowerCase()) {
return ( r[i].style[property] );
}
}
}
}
return null;
}

alert( getcss( '.myclass', 'fontSize' ) );

You could expand the function to loop through all stylesheets, it currently
only looks through the first one. The .toLowerCase() statements make the
function case-insensitive, so you had better not name your classes .such and
..SUCH (for example). This is because IE turns all tagnames in the stylerules
to uppercase.
hth
Ivo
http://4umi.com/web/javascript/