在JavaScript中直接通过element.style.display读取CSS样式表中定义的display:none值，通常返回空字符串而非none。这是因为element.style仅获取内联样式。要正确读取CSS定义的属性，应使用getComputedStyle方法获取最终计算后的样式值，从而解决通过JS控制元素显隐时的判断失效问题。
JavaScript获取CSS display:none失效的原因
现象表现为点击第二次蓝色横条时才生效，说明第一次点击时未能正确获取到foot.style.display等于"none"的状态。尽管在CSS中已经明确定义了相关样式，但JS逻辑未能按预期工作。
<style type="text/css">
#top {width:100px; background-color:#00CCFF; height:20px}
#foot {width:100px; background-color: #CCCC00; height:50px; display:none}
</style>
<script language="javascript">
<!--
function qa(){
if (foot.style.display=="none") {
foot.style.display="block";};
else {
foot.style.display="none;"}
}
-->
</script>
</head>
<body>
<div id="top" onclick="qa()"></div>
<div id="foot">
</body>