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>
Document.getElementsByClassName()
retorna um vetor de objetos onde deve iterar para trabalhar com elementos individuais.