javascript - JS 切换 DIV 的 CSS 中的更改不会在第一次点击时触发

Question

背景 我有 3 个 ASP 按钮，每个按钮都使用 DIV ID 参数调用相同的 JavaScript。触发时，JS 应切换已传递 ID 的 DIV 的显示属性。

问题 当第一次点击按钮时，没有任何反应。在随后的点击中，一切似乎都很好:如果 DIV 是“ block ”，则设置为“无”，反之亦然。

代码对于按钮:

    <button id="pdp_section_a_button" Class="pdp_section_button" onclick="Show_Hide_Display('<%=pdp_section_a_div.ClientID%>');return false">Section A</button>
    <button id="pdp_section_b_button" Class="pdp_section_button" onclick="Show_Hide_Display('<%=pdp_section_b_div.ClientID%>');return false">Section B</button>
    <button id="pdp_section_c_button" Class="pdp_section_button" onclick="Show_Hide_Display('<%=pdp_section_c_div.ClientID%>');return false">Section C</button>

对于 JS 函数:

<script type="text/javascript">

    function Show_Hide_Display(divID) {

        alert(document.getElementById(divID).style.display); // on first click this is blank, on other clicks the DIV's current display property is shown

        var div = document.getElementById(divID);

        if (div.style.display == "" || div.style.display == "block") {
            div.style.display = "none";
        }
        else {
            div.style.display = "block";
        }

        return false;
    }

</script>

Answer 1

element.style 仅显示内联样式，不显示事件的 css 属性。

为了获得事件的 css，请使用以下内容。

var div = document.getElementById(divID);
var style = document.defaultView.getComputedStyle(div);
// equivalent to window.getComputedStyle

var display = style.getPropertyValue('display');
if (display == '' || display == 'block') {
    div.style.display = 'none';
} else {
    div.style.display = 'block';
}