1

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.

3
  • 1
    Agrega otra línea de código donde hagas document.getElementById('informacion').style = 'display:block'
    – Yikarus
    el 29 may. 2017 a las 18:43
  • ¿Esa línea de código por cada vez que quiera mostrar un mensaje en ese div? Lo digo porque si mi programa tiene 300 referencias a ese div...
    – omaza1990
    el 29 may. 2017 a las 18:45
  • Depende de cómo lo quieras y estés manejando. Por el momento en esta pregunta no es posible saber la forma en como quieras hacer tus validaciones, así que no podría responder a esa duda que tienes.
    – Yikarus
    el 29 may. 2017 a las 18:49

2 respuestas 2

3

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

2
  • "block" para desbloquearlo, ¿pero para volver a ocultarlo? ¿hide existe...?
    – omaza1990
    el 29 may. 2017 a las 19:57
  • "none" para quitarlo, y ojo! display:none es como si no estuviera el elemento, no "ocupa" lugar. Si solo quieres ocultarlo, pero que siga ocupando su lugar usa visibility visible/hidden el 29 may. 2017 a las 20:09
1

Mi consejo es que utilices Jquery, tiene funciones para dichos efectos.

Para ocultar

$('#informacion').hide();

o

$('#informacion').css('display','none');

Para mostrar

$('#informacion').show();

o

$('#informacion').css('display','block');
2
  • Muchas gracias por tu versión en jQuery @Liniks, si "document.getElementById("informacion").style.display="block";" sirve pra desbloquearlo, para bloquearlo qué atributo se utiliza.
    – omaza1990
    el 29 may. 2017 a las 19:56
  • Si <document.getElementById("informacion").style.display="block‌​"> sirve para mostrarlo entonces: <document.getElementById("informacion").style.display="none"> sirve para ocultarlo.​
    – Liniks
    el 31 may. 2017 a las 13:11

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.