Question

我需要检查给定display的{{1}}样式属性。在下面的文档中，两个div'div属性都是通过css设置的（一个到display，另一个是none），然后在点击按钮时通过javascript设置，但是{{1只要它没有被脚本设置就是空的（因此我需要点击两次按钮才能获得正确的值）。

block

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>中进行，而不是通过按下按钮，但结果是相同的。

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

'display'样式属性不正确

2 个答案: