What does style.display = '' actually do?

Question

After researching this issue for a couple of hours, I found that one of the most efficient ways to toggle a page element's display (in HTML) is to do something like:

// showing
document.getElementById('element').style.display = '';

// hiding
document.getElementById('element').style.display = 'none';

Simple question: What does style.display = '' actually do?

Does it "reset" the original display property?

Or does it remove the display property, thereby using the default style for display?

..........................................

Would be nice to know: Does anyone know of any links to any kind of documentation about this?

(Yes, I have Google-d this issue, but I'm probably not entering the right search term and keep coming up with completely un-related search results.)

Thanks for any suggestions or links.

Solution 1

Yes, it resets the element's display property to the default by blanking out the inline "display: none", causing the element to fall back on its display property as defined by the page's ranking CSS rules.

For example, here's a <div> with the ID of "myElement".

<div id="myElement"></div>

A <div> has a setting of display:block by default. In our style sheet, suppose we specify that your <div> is to be displayed as table:

div#myElement
{
    display:table;
}

Upon loading your page, the <div> is displayed as table. If you want to hide this <div> with scripting, you might do any of these:

// JavaScript:
document.getElementById("myElement").style.display = 'none';

// jQuery:
$("#myElement").toggle(); // if currently visible
$("#myElement").hide();
$("#myElement").css({"display":"none"});

All of thse have the same effect: adding an inline style property to your <div>:

<div id="myElement" style="display:none"></div>

If you wish to show the element again, any of these would work:

// JavaScript:
document.getElementById("myElement").style.display = "";

// jQuery:
$("#myElement").toggle(); // if currently hidden
$("#myElement").show();
$("#myElement").css({"display":""});

These remove the display CSS property from the inline style property:

<div style=""></div>

Since the inline style no longer specifies a display, the <div> goes back to being displayed as table, since that's what we put in the style sheet. The <div> does not revert to being displayed as block because our CSS overrode that default setting; blanking out the inline display property does not negate the rules in our style sheets.

---

For giggles, here's the Google query I used for verification of my answer: javascript style display empty string default

...and a couple of links where this is mentioned:

http://jszen.blogspot.com/2004/07/table-rowsrevealed.html

http://www.harrymaugans.com/2007/03/05/how-to-create-a-collapsible-div-with-javascript-and-css/ (not in the article, but in the comments section)

Solution 2

It sets the display style to the default value for that element. For most elements if not all, the default value is something other than none.

Solution 3

It removes the value for the display property so that the default value is used.

It does not reset the original display property.

If you for example have this:

<span id="test" style="display:block;">b</span>

And do this:

document.getElementById('test').style.display = 'inline';
document.getElementById('test').style.display = '';

the display style used for the element ends up being inline because that's the default for the element, it is not reset back to the style specified in the HTML code.

Solution 4

It sets the css for that element's display to null which essentially wipes out what was set and it reverts to its default value.

View more solutions

Comments

[nnnnnn]

When you say "the default value", does that include applicable styles in a stylesheet? If there is a stylesheet that says #test { display: block; } (or perhaps span { display: block; }) then that would apply wouldn't it?

[Guffa]

@nnnnnn: That is correct. Also inherited styles apply, it's only the inline style that is affected by the style property.

[Shawn Spencer]

Jake, thank you very much for the explanation and the links. I truly appreciate that a great deal. Thank you!

[Shawn Spencer]

Thank you, Guffa, for the explanation and the code samples. You rock!

[David Spector]

So my understanding is that if I declare a DIV as FLEX in a css file, then hide it using display:none in JavaScript , I can't use display:"" to show it again, because that would set the DIV to BLOCK (the default for the element) instead of the desired FLEX. Fooey. If I want to hide and show DIVs efficiently (like to simulate tabs), I still have to save the original display style somewhere, or else use documentfragment DOM manipulation (but I can't find a tutorial on how to do that).