JS, um die Änderung in DIVs CSS umzuschalten, die nicht beim ersten Klick ausgelöst wird

Question

Hintergrund Ich habe 3 ASP-Schaltflächen und jeder ruft dasselbe JavaScript mit einem Parameter einer DIV-ID auf. Wenn gefeuert wird, sollte der JS die Anzeigeeigenschaft des DIV, dessen ID übergeben wurde, umschalten.

Problem Wenn die Taste zum ersten Mal angeklickt wird, passiert nichts. Bei den folgenden Klicks scheint alles in Ordnung zu sein: Wenn der DIV 'Block' ist, dann setze 'None' und umgekehrt.

-Code Für Tasten:

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

Für JS-Funktion:

<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 nur die Inline-Styles zeigt, nicht die aktive CSS-Eigenschaft.

Um die aktive CSS zu bekommen, verwenden Sie Folgendes.

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