Cómo cambiar la visualización de un div usando javascript

Question

tengo un div de la siguiente manera:

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

para hacerla visible de nuevo, intentó sin éxito:

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

¿Cómo puedo cambiar la pantalla estilo de div para que sea visible de nuevo?

EDIT: aparentemente algo más está mal. esto es lo que realmente estoy haciendo:

<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> 

Espero que aparezca la primera, pero no es así. ¿Qué pasa?

Answer 1

Cambiar el estilo a displayblock en lugar de '':

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

Tenga en cuenta que hay que tener cuidado para restaurar el valor original de display. Si configura un elemento a para tener display: block, se verá muy diferente de lo que esperaba. Debería configurarlo en el display: inline, haciendo el cambio obvio al código anterior.

---

Editar, con su edición, el problema se hace evidente: no existen los elementos cuando se ejecute el Javascript. Espere hasta que todo se haya cargado antes de buscar elementos:

<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> 

Answer 2

que podría hacer:

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

Answer 3

configura display a una cadena vacía, que es CSS válido, en lugar de tratar, among others:

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

o:

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

Answer 4

Funciona para mí ... ¿estás seguro de que no hay algo en tu hoja de estilo?

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

(Comentario la Javascript para probar sin)

Answer 5

Se puede verificar que flagprofile se establece en 1? Intente hacer alert(flagprofile); y vea si realmente está configurado. Si no, puede intentar var flagprofile = 1; en su lugar.

Answer 6

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"); 
    } 

} 

Answer 7

Por alguna razón tuve que hacer las dos cosas a continuación para que funcionara.

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

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

Después de simplemente configurar el primero todavía estaba oculto para mí. Una vez que inspeccioné el DOM en F12, noté que a pesar de display: block, visibility todavía estaba configurado en hidden.

También debo señalar que utilizo jQuery/jQueryUI para los mismos elementos.

Espero que esto ayude a alguien.

Answer 8

Esta es una muestra de trabajo: espero que ayude! Michael, Sudáfrica

function CountryChange() { 
 
    \t 
 
    \t if (document.getElementById("statebox").style.display == "block") 
 
    \t { 
 
    \t \t document.getElementById('statebox').style.display = 'none'; 
 
    \t \t document.getElementById('statebox').style.visibility = 'none'; 
 
    \t } 
 
    \t else 
 
    \t { 
 
    \t \t document.getElementById('statebox').style.display = 'block'; 
 
    \t \t document.getElementById('statebox').style.visibility = 'visible'; 
 
    \t } 
 
     
 
    }

<!-- 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.com/images/branding/googlelogo/2x/googlelogo_color_284x96dp.png" name="picpincountry"/>