javascript style.display只能用css内嵌

Question

我不理解这种行为。

当我点击ChangeDiv1按钮时，如果我设置了样式“display：none”，内联工作正常。

当我点击ChangeDiv2按钮document.getElementById（“conten2”）时，在标题标签中设置样式“display：none”。style.display为空。

如果我点击ChangeDiv3按钮document.getElementById（“conten3”）时没有设置样式“display：none”。style.display为空。

我该如何解决这个问题？

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

您检查是否有elememt有显示：块或无。然而，还有很多其他人喜欢初始，内联，轮廓...。这就是为什么你的js不起作用。 明确将其设置为你的CSS：

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

或更改您的js

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

Answer 2

您可以切换除 “none” 以外的任何为 “无”。您可以切换“无”到“阻止”。除非已明确设定

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

显示不是元件的一部分。 看到这个答案。

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