Incorrect 'display' style attribute

Question

I need to check the displaystyle attribute for a given div. In the document below, both divs' display attribute is set through css (one to none, the other to block) and later through javascript when the button is clicked, but div.style.display is empty as long as it has not been set by script (hence I need two clicks on the buttons to get the correct values).

function myFunction() {
  document.getElementById("dispa").innerHTML = document.getElementById("mydiva").style.display;
  document.getElementById("mydiva").style.display = "none";
  document.getElementById("dispb").innerHTML = document.getElementById("mydivb").style.display;
  document.getElementById("mydivb").style.display = "none";
}

      #mydiva {
        display:block;
      }
      #mydivb {
        display:none;
      }

<button onclick="myFunction()" id="b">See</button>
<p id="dispa">display</p>
<div id="mydiva">
  sample div a
</div>
<p id="dispb">display</p>
<div id="mydivb">
  sample div b
</div>

Note: in my project, reading of display is to happen in window.onload, not through button press, but results are the same.

@CarolMcKay I need to know if a div is initially displayed or not, I don't see how your suggestion can help me with that... any details ? — Christoph Frings, Jul 06 '16 at 07:57

Thomas Jericho Capuyan · Answer 1 · 2016-07-06T08:01:40.157

0

<p id="dispa">display</p>
<div id="mydiva" style="display:none;">
    sample div a
</div>
<p id="dispb">display</p>
<div id="mydivb">
    sample div b
</div>




<script>
$(document).ready(function(){
    $("#b").click(function(){
        $("#mydiva").toggle();
        $("#mydivb").toggle();
    });
});
</script>

Is this what you trying to do?

edited Jul 06 '16 at 08:01

answered Jul 06 '16 at 07:44

Thomas Jericho Capuyan

85
6

Yep, but without jQuery (that's what the `$`stuff is about, right? I'm a total noob in javascript). – Christoph Frings Jul 06 '16 at 08:08

score 0 · Accepted Answer · answered Jul 06 '16 at 07:44

You can get the display style using the function below

function myFunction() {
  document.getElementById("dispa").innerHTML = getDisplayStyle("mydiva");
  document.getElementById("mydiva").style.display = "none";
  document.getElementById("dispb").innerHTML = getDisplayStyle("mydivb");
  document.getElementById("mydivb").style.display = "none";
}

function getDisplayStyle(elementId) {
  var element = document.getElementById(elementId)
  return element.currentStyle ? element.currentStyle.display :
    getComputedStyle(element, null).display;
}

#mydiva {
  display: block;
}
#mydivb {
  display: none;
}

<button onclick="myFunction()" id="b">See</button>
<p id="dispa">display</p>
<div id="mydiva">
  sample div a
</div>
<p id="dispb">display</p>
<div id="mydivb">
  sample div b
</div>

Incorrect 'display' style attribute

2 Answers2