Getting CSS property value

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

Andrew Poulos - 31 May 2005 13:10 GMT

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

Reply to this Message

VK - 31 May 2005 15:48 GMT

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.

Reply to this Message

Martin Honnen - 31 May 2005 17:07 GMT

> 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

Signature

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

Reply to this Message

Michael Winter - 31 May 2005 17:32 GMT

> 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

Signature

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

Reply to this Message

RobB - 31 May 2005 18:58 GMT

> 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
[quoted text clipped - 15 lines]
>
> Andrew Poulos

Someday this will be easy. Someday.

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

Reply to this Message

Ivo - 31 May 2005 22:08 GMT

> 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
[quoted text clipped - 10 lines]
> 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/

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / JavaScript / May 2005

Getting CSS property value