Get style from class

[nossai]

Hi,

I've got a problem with getting a css attribute from an object on my webpage.

to get a attribute, you normally write like this:

var clr = document.getElementById("elementID").style.backgroundColor;

The problem is, that the attribute is not defined in the style property, but in an external css-file as a class, like this:

<div class="mystyle" id="elementID">****x</div>

now, for some reason, the browsers don't understand this, so "style.backgroundColor" returns nothing at all. I've tried to set the background-color attribute in a style-tag and it works, but it's too clumsy and the page is too large as it is, so i don't want this.

anyone know how to get an attribute from the external css-file?

[Bernard Marx]

In IE, this is reliable:

[blue]<elementRef>.currentStyle.backgroundColor[/blue]

Will return the actual effective style props (stylesheets & inline cascaded)

The standards (Moz etc) way uses:

[blue]getComputedStyle()[/blue]

It's workings are different (some say parts of it aren't reliable).
Search for it (or maybe later someone here will know more)

[Birdman]

Check out the styleSheets Collection [msdn.microsoft.com] and the styleSheet Object [msdn.microsoft.com].

[Bernard Marx]

Playing with stylesheets is fun. I've just been doing some of that today:
[webmasterworld.com ]

BUT, it's not really suited to this purpose.

If you think of how many different rules, in different sheets, can have an effect on the final, actual, style of an element - tag selectors, class & id selectors, possible multiple classes or contextual selectors - and then add the effect of inline styles, you see that (although it's not impossible) it's almost too difficult to contemplate trying to calculate the cascade effect yourself.

[nossai]

Hi!

I figured it out now...

if (document.getElementById(elementID).currentStyle)
clr = document.getElementById(elementID).currentStyle["backgroundColor"];
else if (window.getComputedStyle){
var elstyle = window.getComputedStyle(document.getElementById(elementID), "");
clr = elstyle.getPropertyValue("background-color");
}

It works in ie, firefox & opera...

[eSite]

Hi nossai,

I want to thank you for that piece of code.
I wanted to fetch the value with PHP but nobody could answer me.

My sites use Google AdSense and LOTS of CSS files, users are even able to create their own, so I relay need the ads to dynamically meet the CSS.

AdSense code :

 <script type="text/javascript">
 <!--
 google_ad_client = "pub-1814817475011457";
 google_color_text = "999999";
 google_ad_channel ="4693942683";
 google_ad_type = "text";
 google_language = "fr";
 google_ad_width = 120;
 google_ad_height = 600;
 google_ad_format = "120x600_as";
 google_color_border = "FFFFFF";
 google_color_bg = "FFFFFF";
 google_color_link = "999999";
 google_color_url = "0066FF";
 //-->
 </script>
 <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
 </script>

Example of CSS file :

[domain.com...]

.pineapple {
 color: #00ff00;
 }

I don't know JS, could you please adapt your code so that it works in AdSense?
(With google_color_bg for example)

Big thank by advance.

[createErrorMsg]

it's almost too difficult to contemplate trying to calculate the cascade effect yourself

I read somewhere that for this very reason the only time you should mess with the stylesheets Object is when you want to overwrite it with a new style, or create a style that you know doesn't exist anywhere else in the cascade.

[buckworks]

Off-topic: When I saw the title of this thread my first thought was about fashion!