Was erklärt den Unterschied zwischen einem div, dessen Anzeige inline vs in css eingestellt ist

Question

Wenn wir ein div mit einem Inline display: none stylen und dann versuchen, es mit style.display = 'Block' schaltet es funktioniert wie erwartet. Wenn wir ein div mit in CSS setzen und dann versuchen, es umzuschalten, überspringt es eine Runde (vermutlich weil es die Anzeigeeigenschaft inline einstellt), bevor es wie erwartet funktioniert.

Was ist der richtige Weg, um die Anzeige für in CSS gesetzte divs zu ändern?

Als ein Beispiel für das Verhalten ich spreche, sollten Sie die folgenden Schnipsel:

document.getElementById("toggle").addEventListener("click", function() { 
 
    var elt = []; 
 
    elt.push(document.getElementById("inlineStyle")); 
 
    elt.push(document.getElementById("cssStyle")); 
 

 
    elt.forEach(function(e) { 
 
    e.style.display = e.style.display === 'none' ? 'block' : 'none'; 
 
    }); 
 
});

#cssStyle { 
 
    display: none; 
 
}

<button id="toggle">Toggle</button> 
 
<div id="inlineStyle" style="display: none"> 
 
    <p>Inline styling</p> 
 
</div> 
 
<div id="cssStyle"> 
 
    <p>CSS styling</p> 
 
</div>

Dann, wenn wir uns auf die Toggle-Button klicken, werden die divs abwechselnd anstatt zusammen.

Answer 1

Die Sache hier ist, dass element.style nicht mit CSS-Styling entspricht, sondern über style="" direkt eingestellt. Ihr Element mit der ID inlineStyle hat also einen Wert für style.display, das Element mit der ID cssStyle jedoch nicht.

Und es ist dieser Wert, den Sie in Ihrem Click-Handler einchecken, und deshalb sehen Sie unterschiedliche Ergebnisse. Wenn Sie die Logik in der forEach zu

e.style.display = e.style.display !== 'block'? 'block' : 'none'; 

Sie die gleichen