JS切换DIV's第一次点击时CSS未启动

JS to toggle change in DIV's CSS not firing on first click

本文关键字：CSS 启动 第一次 DIV 切换 JS      更新时间：2023-09-26

背景我有三个ASP按钮，每个按钮都用一个div ID的参数调用相同的JavaScript。当触发时，JS应该切换其ID已传递的div的显示属性。

问题第一次单击按钮时，不会发生任何事情。在随后的单击中，一切似乎都很好：如果DIV是"block"，则设置为"none"，反之亦然。

代码按钮：

    <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>

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';
}
相关文章：