如何更改使用JavaScript的div的显示

我有一个div如下:

<div id="div1" style="display:none"> 

为了再次显示,我尝试失败:

 document.getElementById('div1').style.display = '' 

如何更改div的显示样式,以便再次显示?

编辑:显然是别的是错的。 这是我实际上在做什么:

 <script type="text/javascript"> flagprofile = <?php print 1 ?>; if(flagprofile == 1){ document.getElementById('theid').style.display = 'block'; } else { document.getElementById('theid2').style.display = 'block'; } </script> <div id="theid" style="display:none">This is div 1</div> <div id="theid2" style="display:none">This is div 2</div> 

我期望第一个出现,但不是。 怎么了?

8 Solutions collect form web for “如何更改使用JavaScript的div的显示”

display样式更改为block而不是''

 document.getElementById('div1').style.display = 'block'; 

请注意,您需要小心恢复display的原始值。 如果你设置a元素为display: block ,它会和你期望的看起来有很大的不同。 您需要将其设置为display: inline而对上面的代码进行明显的更改。


编辑 ,编辑,问题变得清晰:当你的Javascript运行时,元素不存在。 等到一切都已经加载之前search元素:

 <script type="text/javascript"> window.onload = function() { var flagprofile = <?php print 1 ?>; if(flagprofile == 1){ document.getElementById('theid').style.display = 'block'; } else { document.getElementById('theid2').style.display = 'block'; } }; </script> 

您将display设置为空string,这是无效的CSS,而不是尝试, 其中包括 :

 document.getElementById('div1').style.display = 'block'; 

要么:

 document.getElementById('div1').style.display = 'inline-block'; 

适用于我…你确定样式表中没有东西吗?

http://jsfiddle.net/minitech/YL8tq/

(注释掉没有testing的JavaScript)

你可以validationflagprofile被设置为1吗? 尝试做alert(flagprofile); 并看看是否真的设置。 如果没有,你可以尝试var flagprofile = 1; 代替。

这是一个工作示例:希望它有帮助! 迈克尔,南非

  function CountryChange() { if (document.getElementById("statebox").style.display == "block") { document.getElementById('statebox').style.display = 'none'; document.getElementById('statebox').style.visibility = 'none'; } else { document.getElementById('statebox').style.display = 'block'; document.getElementById('statebox').style.visibility = 'visible'; } } 
  <!-- BOX to switch on/off --> <div class="control-group" id="statebox" name="statebox" style="display: none"> <label class="control-label">Bla Bla Bla...</label> </div> <!-- Pic to click --> <img onclick="javascript:CountryChange()" src="https://www.gstatic.comhttp://img.dovov.combranding/googlelogo/2x/googlelogo_color_284x96dp.png" name="picpincountry"/> 

你可以这样做:

 document.getElementById('div1').style.display = 'block' 
 var uname=document.getElementById("urname").value; var passwrd=document.getElementById("passwd").value; if(uname=="john" && passwrd=="123"){ document.getElementById("form2").style.display='none'; document.getElementById("form1").style.display='block'; } else{ alert("Wrong username and pass"); } } 

出于某种原因,我不得不做两个以下来得到这个工作。

 document.getElementById('theid').style.display = 'block'; document.getElementById('theid').style.visibility = 'visible'; 

刚刚设置第一个之后,它仍然隐藏着我。 一旦我检查了F12中的DOM,我注意到,尽pipedisplay: blockvisibility仍然设置为hidden

我也应该注意到,我使用相同的元素jQuery / jQueryUI。

希望这有助于某人。