What Does Style.Display = '' Actually Do

What does style.display = '' actually do?

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)

element.style.display is not what rendered in the browser

CSS styles are not available to JavaScript unless they have been formerly set in JavaScript or they have been hardcoded as inline styles.

Use getComputedStyle() instead:

function displayStyle(aEvent) {  var target = aEvent.target;  target.textContent = window.getComputedStyle(target).getPropertyValue('display');}
window.onload = function() {  var top_array = document.getElementsByClassName("top");  for (var i = 0; i < top_array.length; i++) {    top_array[i].addEventListener("click", displayStyle, false);  }}

.top {  background-color: #FFF8DC;}

<div class="top">top (click it and it will now show "block" since we're getting its computed style.)</div>

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

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

Why is an if statement returning false when the div's style.display is actually 'block'?

if (step1.style.display === 'block') { is checking the inline styles of step1, if you want to simply determine whether it currently has that style, you need to do

 const styles = window.getComputedStyle(step1);
 if (styles.getPropertyValue('display') === 'block') {
     // do something
 }

How to do Javascript Function which will change the style display of element?

When you are writing your if, you are not actually checking if the display === "none", you are trying to set it to none.

What you should be doing looks like this:

function burgerMenu(){
            let menuStyle = document.getElementById("hiddenMenuUL").style.display;
            if(menuStyle === 'none'){
                document.getElementById("hiddenMenuUL").style.display="block";
            }
            else {
                document.getElementById("hiddenMenuUL").style.display="none";
            }
    }

Edit:

It seems display rule is defined in CSS, and isn't inline.

.style can only reach inline styles, for example:

<div id="hiddenMenuUL" style="display: none;"></div>

Adding 'display: none' inline like in the example above should be the fastest and easiest way to 'fix' it in your particular scenario, although it probably wouldn't be considered the best practice.

Javascript display == none not actually displaying

The variable display has been assigned the value of the display property of the object (which is a string value), changing the variable will not change the property, instead, you can use style:

function filter_toggle() {
  var form = document.getElementById("filter_form");
  var style = form.style;
  
  if (style.display != "none") {
    style.display = "none";
  } else if (style.display == "none") {
    style.display = "block";
  }
}

<div id="filter_wrap">
  <div id="filter_toggle" class="basic_toggle" onclick="filter_toggle()">--Filter--</div>
  <div id="filter_form" class="bg-1D1D1D">
    Hello, World!
  </div>
</div>

why won't this style.display work?

First try alerting just the style.display and see what it contains:

var el = document.getElementById("annonsera_price");
alert(el.style.display);

style only references what is in the style attribute (or set through JS on the style property). It's possible that the display is set through the class, and therefore el.style.display won't show anything.

[Update]:Given the update, the reason no alert happens is because style.display will be "", not "inline" or "block". It won't be "inline" or "block" until you set it to something, either in the style attribute or by setting .style.display.

---

Related Topics