Reading non-inline CSS style info from Javascript

Question

I know I must be missing something here, but I cannot seem to get this to work.

I have assigned a background color to the body of an html document using the style tags inside the head section of the document, but when I try to read it via JavaScript, I get nothing:

<html>
<head>
<style>
body { background-color: #ff0; }
</style>
</head>
<body>
<a href="#" onclick='alert(document.body.style.backgroundColor)'>Click Here</a>
</body>
</html>

.. however, if I assign the style inline, it works:

<html>
<head></head>
<body style='background-color: #ff0;'>
<a href="#" onclick='alert(document.body.style.backgroundColor)'>Click Here</a>
</body>
</html>

I know I am missing something basic, but my mind is not in the zone today -- can anyone tell me why my first scenario is not working?

Thanks

stackoverflow.com/questions/1048336/…

Maciej Łebkowski
– Maciej Łebkowski

2009-07-08 14:17:00 +00:00
Commented Jul 8, 2009 at 14:17 — Maciej Łebkowski
– Maciej Łebkowski, Commented Jul 8, 2009 at 14:17
Check this out: stackoverflow.com/questions/324486/…

Peter
– Peter

2009-07-08 14:17:57 +00:00
Commented Jul 8, 2009 at 14:17 — Peter
– Peter, Commented Jul 8, 2009 at 14:17

Matt Bridges · Accepted Answer · 2009-07-08 14:23:43Z

7

The style property of a DOM element refers only to the element's inline styles.

Depending on the browser, you can get the actual style of an element using DOM CSS

In firefox, for example:

var body = document.getElementsByTagName("body")[0];
var bg = window.getComputedStyle(body, null).backgroundColor;

Or in IE:

var body = document.getElementsByTagName("body")[0];
var bg = body.currentStyle.backgroundColor;

answered Jul 8, 2009 at 14:23

Matt Bridges

49.6k7 gold badges50 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ajm · Accepted Answer · 2009-07-08 14:21:28Z

4

In this case, you'll want the computedStyle on the Element as the style attribute hasn't been set yet. In IE, you'll need to check the Element's currentStyle property, via something like this.

answered Jul 8, 2009 at 14:21

ajm

20.2k3 gold badges34 silver badges38 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:26:44Z

1

Here is a function you can use (without the use of a framework ie) that was posted here by InsDel:

function getStyle(className) {
    var classes = document.styleSheets[0].rules || document.styleSheets[0].cssRules
    for(var x=0;x<classes.length;x++) {
        if(classes[x].selectorText==className) {
                (classes[x].cssText) ? alert(classes[x].cssText) : alert(classes[x].style.cssText);
        }
    }
}
getStyle('.test')

edited May 23, 2017 at 12:26

CommunityBot

11 silver badge

answered Jul 8, 2009 at 14:20

Andreas Grech

108k102 gold badges303 silver badges362 bronze badges

Comments

airportyh · Accepted Answer · 2009-07-08 14:16:01Z

0

That's just how css works. There's no straight-forward way to get the computed css attributes of an element within Javascript, that I know of, short of browser specific utilities.

answered Jul 8, 2009 at 14:16

airportyh

22.8k13 gold badges61 silver badges75 bronze badges

Collectives™ on Stack Overflow

Reading non-inline CSS style info from Javascript

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related