如果显示属性在标题中，JavaScript切换按钮只能在第二次点击时起作用

Question

我遇到了一个有趣的怪癖，并想知道是否有人能帮助我理解它。如果切换元素的display:none包含在内，一个简单的JavaScript驱动切换按钮，如下所示，效果很好。但是，当我将CSS语句移动到标头中的<style>标记或单独的CSS文件时，它只会在第二次点击时开始切换，并且从此开始，它可以正常工作，切换的基础。这里是JS函数：

<script> 
    function openSec(ordinal) { 
     var tab_name = "sec" + ordinal; 
     if (document.getElementById(tab_name).style.display == "none") { 
      document.getElementById(tab_name).style.display = "table"; 
     } else { 
      document.getElementById(tab_name).style.display = "none"; 
     } 
    } 
</script> 

Answer 1

当CSS语句位于style标记中时，它不再作为被点击的DOM元素的属性存在。浏览器仍在应用样式，但DOM元素不再具有该值作为样式属性。因此，第一次点击，没有显示：无，所以它添加它，然后在第二次点击它将其替换为表。

使用浏览器的开发工具（或类似Firebug）来检查初始HTML，然后在第一次点击后再次检查它，我认为你会看到不同之处。