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

Answer 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)