javascript - myDiv.style.display returns blank when set in master stylesheet

Question

Short Version: Is it standard behaviour that myDiv.style.display (Javascript) returns blank when I have set that div to display:none in a master stylesheet, yet returns "none" when it is set via an inline style?

Long Version:

I have some divs that I hide and unhide via their display style, toggling it with Javascript between block and none. They always start off hidden (display:none) which I have been setting with inline styles thusly:

<div id="anID" class="aClass" style="display:none">
   stuff
</div>

Here is the Javascript to toggle between none and block. The two chOpsXXX() functions just set the divSection.style.display to the opposite value (along with other housekeeping):

var divSection = document.getElementById("chOpsSection" + strSectionID);
var strDisplay = divSection.style.display;
if (strDisplay == "none") {
    chOpsDisplaySection(strSectionID);
} else {
    chOpsHideSection(strSectionID);
}

This all works fine when I use an inline style attribute to set the initial display:none style.

I am also setting other styles for these divs in master stylesheet. So I decided it might make sense to move the initial state of display:none to said stylesheet. I did so. I won't post it, I think you can picture it.

But when I did so, the div is initially hidden (display:none), but the first call to divSection.style.display returns an empty string (alert(strDisplay); returns a blank string, not null).

My Javascript shown above then hides it (becaues it doesn't equal "none") and then the next call to divSection.style.display returns "none" and everything works fine from there. (Same behaviour if I set it to inline in the master stylesheet: the div is initialy visible, and the first call to divSection.style.display returns a blank string).

This is easy enough to fix by checking for both "none" and "" in my Javascript above. But I would like to know if this returning of a blank string from divSection.style.display is standard behaviour.

All replies are welcome.

Answer 1

If you access to a DOM Element via JS(using for example getElementById) you'll not be able to read the computed style of that element, because it is defined inside the CSS file. To avoid this, you have to use property getComputedStyle(or currentStyle for IE).

function getStyle(id, name)
{
    var element = document.getElementById(id);
    return element.currentStyle ? element.currentStyle[name] : window.getComputedStyle ? window.getComputedStyle(element, null).getPropertyValue(name) : null;
}

Usage(JSFiddle):

var display = getStyle('myDiv', 'display');
alert(display); //will print 'none' or 'block' or 'inline' etc