MyDiv.style.display returns a null value specified in the wizard stylesheet

Question

Short version: Is this the standard behavior that myDiv.style.display (Javascript) returns a myDiv.style.display value when I set div to display:none to the wizard’s stylesheet, but returns “none” when it is set via the inline style?

Long version:

I have several div that I hide and show through their display style, switching it with Javascript between block and none . They always start to hide ( display:none ), which I set using the built-in styles:

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

Here is the Javascript for switching between none and block . The two chOpsXXX () functions simply set the value of divSection.style.display to the opposite value (along with another homework):

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

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

I also set other styles for these divs in the wizard stylesheet. So I decided it made sense to move the initial state of display:none to the specified stylesheet. I have done it. I will not publish it, I think you can view it.

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

My Javascript shown above then hides it (because it is not equal to "none") and then calling next on divSection.style.display returns "none" and everything works fine from there. (The same behavior if I set it to inline in the wizard stylesheet: the div will be visible first, and the first call to divSection.style.display returns an empty string).

This is fairly easy to fix by checking both "none" and "" in my Javascript above. But I would like to know if this returning an empty string from divSection.style.display standard behavior.

All answers are welcome.

Answer 1

If you access the DOM element through JS (using, for example, getElementById ), you cannot read the computed style of this element, as it is defined inside the CSS getComputedStyle avoid this, you must use the getComputedStyle (or currentStyle for IE) property.

 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 

Answer 2

It does not work because you removed it as a style attribute on your element and placed it in an external stylesheet. The DOM will not show attribute values ​​that do not exist in the document object (the DOM is just an XML parser that reads your HTML document verbatim).

To find the CSS values ​​set in the external stylesheet, you need to parse document.styleSheets and find the corresponding selector (s).

It uses some library, such as jQuery , because it parses external style sheets and has helper methods to get the full CSS applied to the element.

An example of how you do this in jQuery:

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

PS - Finding an empty line will not work for you, because the display: "does not match the display:" none "(and in fact it is the same as display: block for the div, because the space essentially means inherit )

Answer 3

Javascript display property means only for DOM attribute

Mozilla JS wiki , returns an object that represents the style attribute .

W3schools , a Style object represents an individual style statement

You can use jquery css method to get mixed display value like

 alert($("#foo").css("display")) 

It should not show any, even if you install it using css