JSがDIVのCSSの変更をトグルして最初のクリックで起動しないようにする

Question

背景私は3つのASPボタンを持っており、それぞれが同じJavaScriptをDIV IDのパラメータで呼び出す。起動すると、JSはIDが渡されたDIVの表示プロパティを切り替える必要があります。

問題ボタンを初めてクリックすると、何も起こりません。それ以降のクリックではすべてがうまくいくように見えます.DIVが 'ブロック'の場合は 'なし'に設定し、逆の場合はその逆にします。

コードボタンの ：JS機能について

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

：

<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'; 
}