javascript - JavaScript toggle button only works on second click if display attribute is in header

Question

I came across an interesting quirk, and was wondering if anyone could help me understand it. A simple JavaScript-driven toggle button, as below, works beautifully if the display:none of the toggled element is contained in-line. However, when I move the CSS statement to the <style> tag in the header, or to a separate CSS file, it starts to toggle only on the second click, and from then on, it works fine, on a single-click-per-toggle basis. Here's the JS function:

<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 语句在样式标签中时，它不再作为被点击的 DOM 元素的属性存在。浏览器仍在应用样式，但 DOM 元素不再具有该值作为样式属性。所以第一次点击，没有显示：无，所以它添加它，然后在第二次点击它用表格替换它。

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