Início / coding / Perguntas / 79558960
Accepted
J. Chapman
Asked: 2025-04-07 09:56:46 +0800 CST

Não é possível alterar o estilo de exibição com JavaScript

  • 772

Primeira vez que posto uma pergunta sobre programação aqui. Estou quase terminando um jogo em JS/HTML/CSS e vou publicá-lo no Steam em breve. Resumindo, me deparei com um problema: precisei mover todos os estilos inline do HTML para um arquivo CSS externo. Ao fazer isso, meu código de trabalho parece ter quebrado. Resumi tudo a esta pergunta: por que o botão no código abaixo não exibe a div? Com ​​todos os estilos movidos para um arquivo CSS externo, como posso fazer com que linhas em JavaScript como essa document.getElementById("id").style.display = ""funcionem com ajustes mínimos nas minhas milhares de linhas de código?

CSS :

#testID {
    display: none;
}

HTML :

<div id="testID">
    1234
</div>
<div>
    <button onclick="showFn()">Show</button>
</div>

Javascript :

function showFn() {
  document.getElementById("testID").style.display = ""
}
javascript

3 respostas

  1. O problema é que seu CSS define display: none, mas em JavaScript você está definindo style.display = "", o que não substitui a regra CSS — apenas remove o estilo embutido, deixando a regra CSS externa em vigor.

    Altere esta linha no seu JavaScript:

    document.getElementById("testID").style.display = "";

    para:

    document.getElementById("testID").style.display = "block";

    Isso substitui explicitamente o CSS display: nonee exibe o elemento. Se não tiver certeza de qual valor de exibição usar (por exemplo, inline, flex), inspecione o elemento antes de ocultá-lo para ver qual era originalmente.

    • 6
  2. Best Answer

    Seria melhor usar uma classe, porque assim todas as suas informações de estilo permanecerão na folha de estilo. Se o seu JavaScript alterar o código stylediretamente, algumas das suas informações de estilo estarão na folha de estilo e outras no JavaScript... isso torna seu código mais difícil de manter.

    function showFn() {
  document.getElementById('testID').classList.remove('hidden')
}
    .hidden {
  display: none;
}
    <div id="testID" class="hidden">
    1234
</div>

<div>
    <button onclick="showFn()">Show</button>
</div>

    • 4

  3. Não estou respondendo à pergunta diretamente como foi feita (*), mas acho que vale a pena ressaltar que o hiddenatributo existe e pode ajudar muito nestes cenários:

    <div id="testID" hidden>
    1234
</div>
<div>
    <button onclick="testID.hidden=false">Show</button>
</div>

    (*) a reversão displaygeralmente é melhor feita usandodisplay: revert

    • 1

relate perguntas