JavaScript style.display funktioniert nur mit css inline

Question

Ich verstehe dieses Verhalten nicht.

Wenn ich den Stil "display: none" inline funktioniert ordnungsgemäß, wenn ich auf ChangeDiv1-Schaltfläche klicke.

Wenn ich Style "display: none" im Header-Tag setze, wenn ich auf ChangeDiv2 Button document.getElementById ("conten2") klicken. Style.display ist leer.

Wenn ich nicht den Stil "display: none" setze, wenn ich auf ChangeDiv3 button document.getElementById ("conten3") klicke. Style.display ist leer.

Wie kann ich das lösen?

function cambiar1() { 
 
    var miElemento1 = document.getElementById("conten1").style.display; 
 
    if (miElemento1 == "block") document.getElementById("conten1").style.display = "none"; 
 
    if (miElemento1 == "none") document.getElementById("conten1").style.display = "block"; 
 
    document.getElementById('estadoconten1').innerHTML = 'State Div1:' + document.getElementById("conten1").style.display; 
 
    } 
 
    
 
    function cambiar2() { 
 
    var miElemento2 = document.getElementById("conten2").style.display; 
 
    if (miElemento2 == "block") document.getElementById("conten2").style.display = "none"; 
 
    if (miElemento2 == "none") document.getElementById("conten2").style.display = "block"; 
 
    document.getElementById('estadoconten2').innerHTML = 'State Div2:' + document.getElementById("conten2").style.display; 
 
    } 
 
    
 
    function cambiar3() { 
 
    var miElemento3 = document.getElementById("conten3").style.display; 
 
    if (miElemento3 == "block") document.getElementById("conten3").style.display = "none"; 
 
    if (miElemento3 == "none") document.getElementById("conten3").style.display = "block"; 
 
    document.getElementById('estadoconten3').innerHTML = 'State Div3:' + document.getElementById("conten3").style.display; 
 
    }

#estadoconten1 {border:solid 1px red} 
 
#conten2 {display:none; border:solid 1px green} 
 
#conten3 {border:solid 1px blue}

<h2> 
 
MODIFY "LOAD TYPE" AT JAVASCRIPT MENU AND SET "IN HEAD" OPTION 
 
</h2> 
 
<button type="button" onclick="cambiar1()">ChangeDiv1</button> 
 
<button type="button" onclick="cambiar2()">ChangeDiv2</button> 
 
<button type="button" onclick="cambiar3()">ChangeDiv3</button> 
 
<div id='estadoconten1'></div> 
 
<div id='estadoconten2'></div> 
 
<div id='estadoconten3'></div> 
 
<br> 
 
<div id='conten1' style='display:none'> 
 
I am Div 1 
 
</div> 
 
<br> 
 
<div id='conten2'> 
 
I am Div 2 
 
</div> 
 
<br> 
 
<div id='conten3'> 
 
I am Div 3 
 
</div>

Example jsfiddle

Answer 1

Sie überprüfen, ob ein Elememt Display hat: Block oder keine. Jedoch gibt es viele andere wie initial, inline, outline .... Deshalb arbeitet dein js nicht. set Explizit es zu Ihrem CSS:

#conten1,#conten2,#conten3{ 
display:block; 
} 

Oder Ihre js ändern

if(element.style.display=="none"){ 
//element is hidden 
//display 
}else{ 
//elememt is not hidden 
//hide 
} 

Answer 2

Sie etwas anderes als "none" umschalten auf "none". Sie können "none" auf "block" umschalten.

function cambiar(idx) { 
 
    var el = document.getElementById("conten" + idx); 
 
    var miElemento = el.style.display; 
 
    if (miElemento === "none") { 
 
    el.style.display = "block"; 
 
    } else { 
 
    el.style.display = "none"; 
 
    } 
 
    document.getElementById('estadoconten' + idx).innerHTML = 'State Div' + idx + ':' + el.style.display; 
 
}

#estadoconten1 { 
 
    border: solid 1px red 
 
} 
 
#conten2 { 
 
    display: none; 
 
    border: solid 1px green 
 
} 
 
#conten3 { 
 
    border: solid 1px blue 
 
}

<button type="button" onclick="cambiar(1)">ChangeDiv1</button> 
 
<button type="button" onclick="cambiar(2)">ChangeDiv2</button> 
 
<button type="button" onclick="cambiar(3)">ChangeDiv3</button> 
 
<div id='estadoconten1'></div> 
 
<div id='estadoconten2'></div> 
 
<div id='estadoconten3'></div> 
 
<br> 
 
<div id='conten1' style='display:none'> 
 
    I am Div 1 
 
</div> 
 
<br> 
 
<div id='conten2'> 
 
    I am Div 2 
 
</div> 
 
<br> 
 
<div id='conten3'> 
 
    I am Div 3 
 
</div>

Answer 3

Anzeige des Elements, es sei denn, die nicht Teil hat, ist speziell festgelegt wurde. siehe diese Antwort.

document.getElementById(...).style.display is blank