“显示”样式属性不正确

Question

我需要检查给定的div的display样式属性。在下面的文档中，两个div的display属性都是通过css（一到none，其他到block），稍后通过javascript单击按钮时设置，但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

你可以使用下面的函数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>

Answer 2

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

这是你想要做的吗？