How come changing styles with document.getElementById() works with styles set inline but not internally?

Question

If I set a style inline like this:

<div id='myMenu' style='background-color:red'></div>

Then in JS call

alert("document.getElementById('myMenu')style.backgroundColor");

The result alert box would report "red"

However if I set the style internally in the via a class or id

<style type='text/css'>    
.menu {
       background-color:red;
    }
</style>

Then the alert reports blank.

Will styles with .getElementById only work with inline style? Seems very limiting...

Setting the style in a style tag should work just fine. Can you post the actual code you are trying to use? (remember that "." is for class names, and '#' for ID's) — scunliffe, Oct 25 '10 at 19:07
See http://stackoverflow.com/questions/1098349/reading-non-inline-css-style-info-from-javascript — Roatin Marth, Oct 25 '10 at 19:13

score 1 · Answer 1 · answered Oct 25 '10 at 19:09

1

You are not setting the style attribute for the element but instead you are setting a class.

So...

alert(document.getElementById("myMenu").className);

answered Oct 25 '10 at 19:09

Gabe

score 1 · Answer 2 · answered Oct 26 '10 at 11:11

You can use jQuery to read the "real" background color, no matter how it was assigned:

alert($("#myMenu").css("background-color"));

No idea how it's doing it, but I've checked it now and it works. :)

You can download most recent version of jQuery from the official site: http://docs.jquery.com/Downloading_jQuery

2 Answers2