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

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

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);"

14 de outubro de 2016 4 respostas Resolvido

Renato122 14 de outubro de 2016

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>

4 Respostas

peczenyj 17 de out. de 2016 1 like

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

Renato122 18 de out. de 2016

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

Solucao aceita

MatheusToledo 19 de out. de 2016 1 like

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>

Renato122 20 de out. de 2016

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

Criado 14 de outubro de 2016

Ultima resposta 20 de out. de 2016

Respostas 4

Participantes 3

4 Respostas

Topicos relacionados