2

Como faço para selecionar a cor do backGround do elemento div?

Obs: Usando javascript

var cor;
cor = document.getElementById(id).style.backgroundColor;
#bloco1 {
    width: 280px;
    height: 120px;
    border: 1px dashed black;
    position: relative;
    background-color: blue;
}
<!DOCTYPE html>
<html lang 'pt-br'>

    <head>
        <title>Pintar</title>
    </head>

    <body>
        <div id='bloco1' onclick='selecionarCor(this.id)'></div>
    </body>

</html>

1 Resposta 1

4

Quando usas el.style.backgroundColor; estás à procura de inline styles, ou seja estilos defenidos diretamente no elemento. Por exemplo assim:

<div id='bloco1' style="background-color: #00f;"></div>

Nesse caso näo te vai dar nada pois o teu CSS não está inline mas sim como CSS num ficheiro à parte.

Deves usar window.getComputedStyle(el).backgroundColor. E já agora, se passares apenas o this à função já tens o elemento que queres, não precisas do document.getElementById.

function selecionarCor(el) {
    var cor = window.getComputedStyle(el).backgroundColor;
	alert(cor);
}
#bloco1 {
    width: 280px;
    height: 120px;
    border: 1px dashed black;
    position: relative;
    background-color: blue;
}
<!DOCTYPE html>
<html lang 'pt-br'>

    <head>
        <title>Pintar</title>
    </head>

    <body>
        <div id='bloco1' onclick='selecionarCor(this)'></div>
    </body>

</html>

2
  • Procurei exemplos sobre o assunto, porém não tinha ficado claro, agora entendi. Muito obrigado! Commented 24/11/2016 às 14:06
  • 1
    @RobisonAleixo otimo que pude ajudar! Se quiseres podes marcar a resposta como aceite.
    – Sergio
    Commented 24/11/2016 às 21:45

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 .