Edit CSS property Display: none

Navigation
0

I have the following CSS associated with a div that I used, to show a message to the user, when a form does not fill in any field or introduce erroneous data:

CSS Code: 

#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;
}

HTML Code: 

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

Example of using the "information" div: 

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

Due to the attribute " display:none " is blocked / hidden.

Can it be unlocked using Javascript code or should the CSS code be touched? Obviously removing the "display: none" property makes it visible and works as expected by displaying the message.

    
asked by omaza1990 29.05.2017 в 20:40
source

2 answers

1

To modify the CSS from JavaScript, use the style property of the element, followed by the CSS property, remember that the CSS properties of more than one word in Javascript are camelCase (for example elemento.style.backgroundColor="red"; ).

In your case:
document.getElementById("informacion").style.display="block";

    
answered by 29.05.2017 / 20:49
source
1

My advice is that you use Jquery, it has functions for these effects.

To hide 

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

or 

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

To show 

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

or 

$('#informacion').css('display','block');
    
answered by 29.05.2017 в 21:07
Doubt creating the interface to consume apis with Retrofit when it does not have the @PATH [duplicated] How to upload different profiles on the same page?