Falsches 'Anzeige'-Stil-Attribut

Question

Ich muss das display Stilattribut für eine gegebene div überprüfen. Im folgenden Dokument wird das Attribut display beider Divs durch css (eins zu none, das andere zu block) und später durch Javascript gesetzt, wenn auf die Schaltfläche geklickt wird, aber div.style.display ist leer, solange es nicht vom Skript festgelegt wurde (daher auch) Ich brauche zwei Klicks auf die Tasten, um die richtigen Werte zu erhalten.

function myFunction() { 
 
    document.getElementById("dispa").innerHTML = document.getElementById("mydiva").style.display; 
 
    document.getElementById("mydiva").style.display = "none"; 
 
    document.getElementById("dispb").innerHTML = document.getElementById("mydivb").style.display; 
 
    document.getElementById("mydivb").style.display = "none"; 
 
}

 #mydiva { 
 
     display:block; 
 
     } 
 
     #mydivb { 
 
     display:none; 
 
     }

<button onclick="myFunction()" id="b">See</button> 
 
<p id="dispa">display</p> 
 
<div id="mydiva"> 
 
    sample div a 
 
</div> 
 
<p id="dispb">display</p> 
 
<div id="mydivb"> 
 
    sample div b 
 
</div>

Hinweis: in meinem Projekt, das Lesen von display ist in window.onload, nicht durch Tastendruck, aber die Ergebnisse sind die gleichen geschehen.

Answer 1

Sie können die display Stil erhalten Sie die Funktion unter

function myFunction() { 
 
    document.getElementById("dispa").innerHTML = getDisplayStyle("mydiva"); 
 
    document.getElementById("mydiva").style.display = "none"; 
 
    document.getElementById("dispb").innerHTML = getDisplayStyle("mydivb"); 
 
    document.getElementById("mydivb").style.display = "none"; 
 
} 
 

 
function getDisplayStyle(elementId) { 
 
    var element = document.getElementById(elementId) 
 
    return element.currentStyle ? element.currentStyle.display : 
 
    getComputedStyle(element, null).display; 
 
}

#mydiva { 
 
    display: block; 
 
} 
 
#mydivb { 
 
    display: none; 
 
}

<button onclick="myFunction()" id="b">See</button> 
 
<p id="dispa">display</p> 
 
<div id="mydiva"> 
 
    sample div a 
 
</div> 
 
<p id="dispb">display</p> 
 
<div id="mydivb"> 
 
    sample div b 
 
</div>

Answer 2

<p id="dispa">display</p> 
<div id="mydiva" style="display:none;"> 
    sample div a 
</div> 
<p id="dispb">display</p> 
<div id="mydivb"> 
    sample div b 
</div> 




<script> 
$(document).ready(function(){ 
    $("#b").click(function(){ 
     $("#mydiva").toggle(); 
     $("#mydivb").toggle(); 
    }); 
}); 
</script> 

Ist das, was Sie versuchen zu tun?