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]

Re: Getting CSS property value

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]

Re: Getting CSS property value



VK wrote:
[color=blue]
> alert(document. styleSheets[0].imports[0].rules[0].style.color) for IE,
> FF is out of luck,[/color]

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

--

Martin Honnen

http://JavaScript.FAQTs.com/

[Michael Winter]

Re: Getting CSS property value

On 31/05/2005 15:48, VK wrote:
[color=blue]
> alert(document. styleSheets[0].imports[0].rules[0].style.color) for IE,
> FF is out of luck[/color]

Only because you're using proprietary properties. However, there are
other user agents for which this approach will never work.
[color=blue]
> but actually the whole question is for a good style
> authoring group [...][/color]

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]

Re: Getting CSS property value

Andrew Poulos wrote:[color=blue]
> 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[/color]

Someday this will be easy. Someday.

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

[Ivo]

Re: Getting CSS property value

"Andrew Poulos" wrote[color=blue]
> 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.[/color]

Hopefully this can be of help:

function getcss( selector, property ) {
var i, r, s=document.styl eSheets && document.styleS heets[0]; if(s) {
r = s.rules ? s.rules : s.cssRules; if(r) {
i = r.length; while (i--) {
if(r[i].selectorText.t oLowerCase() === selector.toLowe rCase()) {
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/