JavaScript中style.display获取CSS display:none失效的原因与解决

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>