Modificar propiedad CSS Display:none

publicado por: Anonymous

Tengo el siguiente CSS asociado con un div que usó, para mostrar un mensaje al usuario, cuando en un formulario no se rellena algún campo o se introducen datos erróneos:

Código CSS:

#informacion {
    padding-left:20px;
    background-repeat:no-repeat;
    background-position: 5px center;
    color:#00793d;
    padding:5px;
    padding-left:25px;
    background-color:rgba(200,150,200,0.2);
    border-radius:2px;
    margin:15px;
    display:none;
}

Código HTML:

<div id="informacion" class="linea_formulario"></div>

Ejemplo del uso del div “informacion”:

document.getElementById("informacion").innerHTML = "EL CAMPO "+formulario.elements[i].name+" NO PUEDE ESTAR VACÍO.";

Debido al atributo “display:none” está bloqueado/oculto.

¿Se puede desbloquear mediante código Javascript o habría que tocar el código CSS? Obviamente eliminar la propiedad “display:none” lo hace visible y funciona como se espera mostrando el mensaje.

solución

Para modificar el CSS desde JavaScript, usa la propiedad style del elemento, seguido de la propiedad CSS, recuerda que las propiedades CSS de mas de una palabra en Javascript son camelCase (por ejemplo elemento.style.backgroundColor="red";).

En tu caso:
document.getElementById("informacion").style.display="block";

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *