如果顯示屬性在標題中，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，然後在第一次點擊後再次檢查它，我認爲你會看到不同之處。