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...

Answer 1

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

So...

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

Answer 2

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

Answer 3

Thanks, this post covers it: http://stackoverflow.com/questions/1098349/reading-non-inline-css-style-info-from-javascript