-1

Eu tenho uma função Javascript que pega uma canvas vazia e preenche ela. Só que, como em um primeiro momento eu não quero exibir o canvas, eu setei o estilo dela, no atributo display como "none". Agora, eu alterar o display para block (em tempo de execução). Como eu poderia fazer isso no Javascript?

Essa é a canvas no meu html:

<canvas class="canvasCentral" id="bordas" width="400" height="500">

    </canvas>

O estilo aplicado à canvas é a classe "canvasCentral" de um arquivo css vinculado ao meu html:

.canvasCentral{
        position:absolute;
        top:50%;
        left:50%;
        transform:translate(-50%,-50%);
        border:3px solid #D8D8D8;
        border-radius: 20px;
        display:none

    }

Como eu poderia, no Javascript, em tempo de execução alterar o display da canvas para block?

1
  • O que quer dizer com tempo de execução?
    – LeAndrade
    Commented 9/06/2018 às 15:24

1 Resposta 1

1

Você pode pegar pelo id

document.getElementById('bordas').style.display = "block";

Ou pela classe (se você quiser alterar para todos os elementos que usam essa classe)

var elementos = document.getElementsByClassName("canvasCentral");
elementos.forEach(alteraDisplay)

function alteraDisplay(item, index) {
    item.style.display = "block";
}
2
  • Entendi. Deu certo. Outra coisa: ao passar a função "alteraDisplay" para o forEach, a forEach tem setado como seus parâmetros os da alteraDisplay, certo? Commented 9/06/2018 às 16:23
  • 1
    Então, o forEach tem como callback uma função cujos parâmetros são o current_value, o index (opcional) e o array (opcional), por isso que a função alteraDisplay tem como parâmetros de entrada o item (que vai receber o current_value do callback) e o index (que vai receber o index do callback). Na verdade ela poderia receber apenas o item, porque é a única coisa que estamos usando nesse caso. Para saber mais, veja a documentação do MDN: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
    – echojn
    Commented 9/06/2018 às 18:16

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 .