How do I activate a div with Javascript?

Question

I have the following problem I have a <div> hidden above login field:

<div id="MostraLegenda" class ="legenda" style ="display: none">
    <p>Login do Usuario</p>
</div>

She’s with the display: none, want to use the event onmouseover and put it as display: block.

JS:

function mostrarLegenda()
{
    var div;
    div = document.getElementById("MostraLegenda");
    div.setAttribute.apply("style", "display:block");
    return true;
}

Answer 1

To change the style of an element you can access the properties using elemento.style.[propriedade]

function mostrarLegenda()
{
    var div;
    var estilo;
    div = document.getElementById("MostraLegenda");
    estilo = div.style.display;
    div.style.display = (estilo == 'none') ? 'none' : 'block';

    return true;
}

Answer 2

To make the element appear, use the following code to return the property style of this object that will give you access to the element’s CSS.

See the example below using your own function:

function mostrarLegenda() {
    document.getElementById("MostraLegenda").style.display = 'block';
}

You can also use an automated way to appear/disappear:

function mostrarLegenda() {
    var div = document.getElementById("MostraLegenda");

    if (div.style.display == 'none') {
        div.style.display = 'block';
    } else {
        div.style.display = 'none';
    }
}