2

Estou com o seguinte problema tenho uma <div> oculta em cima do campo login:

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

Ela está com o display: none, quero utilizar o evento onmouseover e coloca-la como display: block.

JS:

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

2 Respostas 2

2

Para alterar o estilo de um elemento você pode acessar as propriedades usando 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;
}
2
  • deu certo, só mais uma questão, eu consigo comparar com um if assim if(div.style.display == 'none'){ 13/12/2017 às 12:43
  • 1
    Consegue sim, só checar if( elemento.style.display == 'none' //ou 'block') 13/12/2017 às 12:44
1

Para conseguir fazer com que o elemento apareça, utilize o seguinte código para retornar a propriedade style deste objeto que lhe dará acesso ao CSS do elemento.

Veja o exemplo abaixo utilizando sua própia função:

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

Você também pode utilizar uma forma automatizada de aparecer/desaparecer:

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

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

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .