1

Tenho que fazer um programa que ao clicar no link "ALTO CONTRASTE" todo o fundo fique preto e que a cor da letra fique branco

A minha dúvida é o que eu estou fazendo de errado? Se eu trocar todas as classes por Id´s funciona apenas na primeira linha (o que é o esperado), então por que ao utilizar com classes não pega as três linhas?

<!DOCTYPE html>
    <html lang="pt-br">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script>
            function Contraste(){
                document.getElementsByClassName ('abc').style.cssText = 'background-color: black ; color : white ;'
            }
        </script>
    </head>
    <body>
        <h2 class="abc" style="color: red;">Olá</h2>
        <h2 class="abc" style="color:blue;">Tudo bem</h2>
        <h2 class="abc" style="color: green;">Com você?</h2>

        <a href="#"  
        onclick ="Contraste()">ALTO CONTRASTE
        </a>
    </body>
</html> 
2
  • 1
    O método Document.getElementsByClassName() retorna um vetor de objetos onde deve iterar para trabalhar com elementos individuais. 28/01/2021 às 19:47
  • Mas tu acha q se eu continuar indo pelo caminho de usar ele e depois iterar funciona? Ou tem outro jeito mais simples? 28/01/2021 às 19:50

1 Resposta 1

2

Como disse nos comentários o método Document.getElementsByClassName() retorna um vetor de objetos onde deve iterar para trabalhar com elementos individuais.

Em javascript existem várias maneiras de se fazer a iteração nesse caso usei o laço for..of

function Contraste() {
  for (let e of document.getElementsByClassName('abc')) {
    e.style.cssText = 'background-color: black ; color : white ;'
  }
}
<!DOCTYPE html>
<html lang="pt-br">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

</head>

<body>
  <h2 class="abc" style="color: red;">Olá</h2>
  <h2 class="abc" style="color:blue;">Tudo bem</h2>
  <h2 class="abc" style="color: green;">Com você?</h2>

  <a href="#" onclick="Contraste()">ALTO CONTRASTE
        </a>
</body>

</html>

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 .