Alterar cor de DIV com JavaScript (Não jQuery)

Front-end
#1

Eu tenho várias DIVS cada uma com seu ID, não há um número determinado de DIVS, eu queria saber como eu faço para que, quando eu clicar na DIV 1 a cor do background mude para azul, e se eu clicar na DIV 5, a DIV 1 volte para cor inicial e a DIV 5 fique azul e assim por diante, um tipo de SELECT com DIV, alguém tem algum exemplo de como se faz isso em JavaScript?

Caso não dê certo, teria alguma forma de fazer a DIV clicada voltar a cor normal depois de 5 segundos?

Abaixo segue meu código…

<script type="text/javascript">
function selecionar(id){
    document.getElementById(id).style.background="#00ff00";
    
}
</script>
<body>
<div onclick="selecionar('div_1');" id="div_1" style="cursor:pointer;height:45px;width:300px;margin:5px;background:#bcd;">DIV 1</div>
<div onclick="selecionar('div_2');" id="div_2" style="cursor:pointer;height:45px;width:300px;margin:5px;background:#bcd;">DIV 2</div>
<div onclick="selecionar('div_3');" id="div_3" style="cursor:pointer;height:45px;width:300px;margin:5px;background:#bcd;">DIV 3</div>
<div onclick="selecionar('div_4');" id="div_4" style="cursor:pointer;height:45px;width:300px;margin:5px;background:#bcd;">DIV 4</div>
<div onclick="selecionar('div_5');" id="div_5" style="cursor:pointer;height:45px;width:300px;margin:5px;background:#bcd;">DIV 5</div>
<span>Outras divs...</span>

</body>
#2

vamos la

vc precisa saber quais são as divs que vc quer “reiniciar”.

uma sugestão: use uma classe para unir as divs com comportamento comum

use getElementsByClassName para pegar todas e assim reiniciar para o style.background original

e ai vc muda o elemento em especifico

1 curtida
#3

O número das DIVS variam muito, pode ser 3, pode ser 10, não tenho um número definido, mas vou tentar…
Valeu!!!

#4

Boa Tarde!!

Veja se é isso que vc esta querendo

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <style type="text/css">
        div{
            cursor:pointer;
            height:45px;
            width:300px;
            margin:5px;
            background: lightblue;
        }
        </style>
        <script type="text/javascript">
            function selecionar(k){
                var x = document.getElementsByClassName("camaleao");
                var i;
                for (i = 0; i < x.length; i++) {
                    x[i].style.background = "lightblue"
                }
                document.getElementById(k).style.background = "red";                
            }
        </script>
    </head>
    <body>
        <div onclick="selecionar(this.id);" class="camaleao" id="div_1">DIV 1</div>
        <div onclick="selecionar(this.id);" class="camaleao" id="div_2">DIV 2</div>
        <div onclick="selecionar(this.id);" class="camaleao" id="div_3">DIV 3</div>
        <div onclick="selecionar(this.id);" class="camaleao" id="div_4">DIV 4</div>
        <div onclick="selecionar(this.id);" class="camaleao" id="div_5">DIV 5</div>
        <span>Outras divs...</span>
    </body>
</html>
1 curtida
#5

Era exatamente o que eu queria Mateus…Muito obrigado pelos códigos, valeu mesmo, de verdade :smiley: !!!