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

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.

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

It's not working because you removed it as a style attribute on your element, and placed it in an external stylesheet. DOM will not show attribute values that do not exist in the document object (DOM is merely an XML parser that reads your HTML document verbatim).

To find CSS values set in an external stylesheet, you have to parse document.styleSheets and find the matching selector(s).

This is where using a library like jQuery becomes really handy, because it parses external stylesheets, and has helper methods to get the full CSS applied to an element.

Example of how you would do this in jQuery:

value = $("#anID").css("display");

PS - Looking for an empty string won't work for you, either, because display: "" is not the same as display: "none" (and in fact, is the same as display: block, for a div, because a blank essentially means inherit)

My solution:

Create class .hidden

.hidden {
   display: none !important;
}

Javascript:

function toggleHidden(id) {
    var x = document.getElementById(id);
    x.classList.toggle('hidden');
}