'display' 样式属性不正确

Question

我需要检查给定 div 的 displaystyle 属性。在下面的文档中，当单击按钮，但 div.style.display 为空，只要它尚未被脚本设置（因此我需要单击两次按钮才能获得正确的值）。

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>

注意：在我的项目中，读取 display 是在 window.onload 中发生的，而不是通过按下按钮，但结果是相同的。

Answer 1

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

这是你想要做的吗？

Answer 2

您可以使用下面的函数获得display样式

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>

'display' 样式属性不正确

Incorrect 'display' style attribute

javascript

css

display