Home / Questions / 137859
Accepted
Norak
Asked: 2020-02-13 03:31:06 +0800 CST 2020-02-13 03:31:06 +0800 CST

Get backgroundColor of a div on click (JavaScript)

  • 772

I'm making a little game of a drawing palette working with the JavaScript DOM. I want clicking on each div with a background color to select that color.

I don't know what I'm doing wrong, because when accessing the property style.backgroundColor, it doesn't return any value, how can I access the backgroundColor of the div I click on?

My code is the following, you can run it to see what I say. I show it in some "alert" so that it is better understood.

function generarLienzo(){
    var cuerpo=document.getElementsByTagName("body")[0];
    var contenedor=document.createElement("div");
    //TITULO
    contenedor.setAttribute("id","contenedor");
    var titulo=document.createElement("h1");
    var textoTitulo=document.createTextNode("Tablero de Dibujo");
    var textoClic=document.createTextNode("Haga CLICK en un color para empezar a dibujar");
    titulo.appendChild(textoTitulo);
    
    contenedor.appendChild(titulo);
    contenedor.appendChild(textoClic);
    //PALETA
    var paleta=document.createElement("div");
    paleta.setAttribute("id","paleta");
   
    for (var i = 1; i < 7; i++) {
        var color=document.createElement("div");
        color.setAttribute("id","color"+i);
        color.setAttribute("class","color");
        color.addEventListener("click",function(){
                quitarSeleccionado();   
               this.className+=" seleccionado";   
               var seleccion=document.getElementById("seleccionar");
               //Aquí tengo el fallo, no sé cómo recoger backgroundColor
               var elemseleccionado = document.getElementsByClassName("seleccionado")[0];
               alert("Se ha seleccionado "+elemseleccionado);
               alert("Se ha seleccionado "+elemseleccionado.style.backgroundColor);
               alert(color.style.backgroundColor);
               
               seleccion.style.backgroundColor=color.style.backgroundColor;
               
        });
       
        paleta.appendChild(color);
        
    }
    var parrafo2=document.createElement("p");
    parrafo2.innerHTML="Estado del pincel:<span id='seleccionar' >Sin Seleccionar</span>";
    
    contenedor.appendChild(parrafo2);
    //TABLA
    var tabla=document.createElement("table");
    tabla.setAttribute("class","zonadibujo");
       var fila=document.createElement("tr");
    fila.setAttribute("class","filadibujo");
    for (var i = 0; i < 960; i++) {
       
      var celda=document.createElement("td");
    celda.setAttribute("class","celdadibujo");
    fila.appendChild(celda);
    
    }
    for (var i = 0; i < 40; i++) {
     tabla.appendChild(fila);
    }
   
    paleta.appendChild(tabla);
   contenedor.appendChild(paleta);
   cuerpo.appendChild(contenedor);
    
}
//EVENTOS
function quitarSeleccionado(){
    var cajasColores= document.getElementsByClassName("color");
    for (var i = 0; i < cajasColores.length; i++) {
        cajasColores[i].classList.remove("seleccionado");//para quitar la clase,sin quitar las demas
        //cajasColores[i].setAttribute("class","color");
    }
}


window.onload=function(){
   
    generarLienzo();
    var contenedor=document.getElementById("contenedor");
  
}
@font-face{
	font-family: Roboto;
	src:url("fonts/Roboto-Regular.ttf");
}


*{
	box-sizing: border-box;
}

html{
	height:100%;
}

body{
	font-family: Roboto;
	background-image:url("img/brush.jpg");
	margin:0px;
	height: 100%;
}

h1{
	margin-top:0px;	
}

/* Contenedor del tablero */

#contenedor{
	width:600px;
	text-align:center;
	margin:0 auto;
	background-color:#D6D6D6;
	border-left:5px solid black;
	border-right:5px solid black;
	padding-top:10px;
	padding-bottom:10px;
}

/* Contiene la paleta de color */

#paleta{
	margin:0 auto;
}

/* Clase común a cada caja de color */

.color{
	width: 80px;
	height: 50px;
	display:inline-block;
	margin-left:10px;
	border:medium solid transparent;
}

/* Ids correspondientes a cada uno de los colores */

#color1 {
	background-color: #F00;
}

#color2 {
	background-color: #0F0;
}

#color3 {
	background-color: #00F;
}

#color4 {
	background-color: #FF0;
}

#color5 {
	background-color: #0FF;
}

#color6 {
	background-color: #FFF;
}


/* Paleta de color seleccionada */
.seleccionado{
	border: 5px solid #000000;
}


/* Tablero de dibujo */
.zonadibujo{
	display:inline-block;
	
}

/* Cada fila del tablero de dibujo */
.filadibujo{
	margin:0px;
	padding:0px;
	height:12px;
}

/* Cada celda del tablero de dibujo */
.celdadibujo {
	width: 10px;
	height:10px;
	margin: 1px;
	padding: 0px;
	background-color:white;
	display:inline-block;
}

javascript

2 Answers

  1. Best Answer

    The problem occurs because it ele.stylereturns the applied styles en linea( eg: <div style="...").

    Since the styles for the divare assigned CSSvia the idassignee, one solution is to use the APIwindow.getComputedStyle

    demonstration:

    function generarLienzo() {
  var cuerpo = document.getElementsByTagName("body")[0];
  var contenedor = document.createElement("div");
  //TITULO
  contenedor.setAttribute("id", "contenedor");
  var titulo = document.createElement("h1");
  var textoTitulo = document.createTextNode("Tablero de Dibujo");
  var textoClic = document.createTextNode("Haga CLICK en un color para empezar a dibujar");
  titulo.appendChild(textoTitulo);

  contenedor.appendChild(titulo);
  contenedor.appendChild(textoClic);
  //PALETA
  var paleta = document.createElement("div");
  paleta.setAttribute("id", "paleta");

  for (var i = 1; i < 7; i++) {
    var color = document.createElement("div");
    color.setAttribute("id", "color" + i);
    color.setAttribute("class", "color");
    color.addEventListener("click", function() {
      quitarSeleccionado();
      this.classList.add("seleccionado");
      var seleccion = document.getElementById("seleccionar");
      seleccion.style.backgroundColor = window.getComputedStyle(this).backgroundColor;
    });

    paleta.appendChild(color);

  }
  var parrafo2 = document.createElement("p");
  parrafo2.innerHTML = "Estado del pincel:<span id='seleccionar' >Sin Seleccionar</span>";

  contenedor.appendChild(parrafo2);
  //TABLA
  var tabla = document.createElement("table");
  tabla.setAttribute("class", "zonadibujo");
  var fila = document.createElement("tr");
  fila.setAttribute("class", "filadibujo");
  for (var i = 0; i < 960; i++) {

    var celda = document.createElement("td");
    celda.setAttribute("class", "celdadibujo");
    fila.appendChild(celda);

  }
  for (var i = 0; i < 40; i++) {
    tabla.appendChild(fila);
  }

  paleta.appendChild(tabla);
  contenedor.appendChild(paleta);
  cuerpo.appendChild(contenedor);

}
//EVENTOS
function quitarSeleccionado() {
  var cajasColores = document.getElementsByClassName("color");
  for (var i = 0; i < cajasColores.length; i++) {
    cajasColores[i].classList.remove("seleccionado"); //para quitar la clase,sin quitar las demas
    //cajasColores[i].setAttribute("class","color");
  }
}


window.onload = function() {

  generarLienzo();
  var contenedor = document.getElementById("contenedor");

}
    @font-face {
  font-family: Roboto;
  src: url("fonts/Roboto-Regular.ttf");
}

* {
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  font-family: Roboto;
  background-image: url("img/brush.jpg");
  margin: 0px;
  height: 100%;
}

h1 {
  margin-top: 0px;
}


/* Contenedor del tablero */

#contenedor {
  width: 600px;
  text-align: center;
  margin: 0 auto;
  background-color: #D6D6D6;
  border-left: 5px solid black;
  border-right: 5px solid black;
  padding-top: 10px;
  padding-bottom: 10px;
}


/* Contiene la paleta de color */

#paleta {
  margin: 0 auto;
}


/* Clase común a cada caja de color */

.color {
  width: 80px;
  height: 50px;
  display: inline-block;
  margin-left: 10px;
  border: medium solid transparent;
}


/* Ids correspondientes a cada uno de los colores */

#color1 {
  background-color: #F00;
}

#color2 {
  background-color: #0F0;
}

#color3 {
  background-color: #00F;
}

#color4 {
  background-color: #FF0;
}

#color5 {
  background-color: #0FF;
}

#color6 {
  background-color: #FFF;
}


/* Paleta de color seleccionada */

.seleccionado {
  border: 5px solid #000000;
}


/* Tablero de dibujo */

.zonadibujo {
  display: inline-block;
}


/* Cada fila del tablero de dibujo */

.filadibujo {
  margin: 0px;
  padding: 0px;
  height: 12px;
}


/* Cada celda del tablero de dibujo */

.celdadibujo {
  width: 10px;
  height: 10px;
  margin: 1px;
  padding: 0px;
  background-color: white;
  display: inline-block;
}

    • 7

  2. use the methodgetComputedStyle()

    function generarLienzo(){
    var cuerpo=document.getElementsByTagName("body")[0];
    var contenedor=document.createElement("div");
    //TITULO
    contenedor.setAttribute("id","contenedor");
    var titulo=document.createElement("h1");
    var textoTitulo=document.createTextNode("Tablero de Dibujo");
    var textoClic=document.createTextNode("Haga CLICK en un color para empezar a dibujar");
    titulo.appendChild(textoTitulo);
    
    contenedor.appendChild(titulo);
    contenedor.appendChild(textoClic);
    //PALETA
    var paleta=document.createElement("div");
    paleta.setAttribute("id","paleta");
   
    for (var i = 1; i < 7; i++) {
        var color=document.createElement("div");
        color.setAttribute("id","color"+i);
        color.setAttribute("class","color");
        color.addEventListener("click",function(){
                quitarSeleccionado();   
               this.className+=" seleccionado";   
               var seleccion=document.getElementById("seleccionar");
               //Aquí tengo el fallo, no sé cómo recoger backgroundColor
               var elemseleccionado = document.getElementsByClassName("seleccionado")[0];
//MODIFICACIÓN
               alert("Se ha seleccionado "+ getComputedStyle(elemseleccionado, null)["backgroundColor"] );
//FIN DE MODIFICACIÓN
               
               seleccion.style.backgroundColor=color.style.backgroundColor;
               
        });
       
        paleta.appendChild(color);
        
    }
    var parrafo2=document.createElement("p");
    parrafo2.innerHTML="Estado del pincel:<span id='seleccionar' >Sin Seleccionar</span>";
    
    contenedor.appendChild(parrafo2);
    //TABLA
    var tabla=document.createElement("table");
    tabla.setAttribute("class","zonadibujo");
       var fila=document.createElement("tr");
    fila.setAttribute("class","filadibujo");
    for (var i = 0; i < 960; i++) {
       
      var celda=document.createElement("td");
    celda.setAttribute("class","celdadibujo");
    fila.appendChild(celda);
    
    }
    for (var i = 0; i < 40; i++) {
     tabla.appendChild(fila);
    }
   
    paleta.appendChild(tabla);
   contenedor.appendChild(paleta);
   cuerpo.appendChild(contenedor);
    
}
//EVENTOS
function quitarSeleccionado(){
    var cajasColores= document.getElementsByClassName("color");
    for (var i = 0; i < cajasColores.length; i++) {
        cajasColores[i].classList.remove("seleccionado");//para quitar la clase,sin quitar las demas
        //cajasColores[i].setAttribute("class","color");
    }
}


window.onload=function(){
   
    generarLienzo();
    var contenedor=document.getElementById("contenedor");
  
}
    @font-face{
	font-family: Roboto;
	src:url("fonts/Roboto-Regular.ttf");
}


*{
	box-sizing: border-box;
}

html{
	height:100%;
}

body{
	font-family: Roboto;
	background-image:url("img/brush.jpg");
	margin:0px;
	height: 100%;
}

h1{
	margin-top:0px;	
}

/* Contenedor del tablero */

#contenedor{
	width:600px;
	text-align:center;
	margin:0 auto;
	background-color:#D6D6D6;
	border-left:5px solid black;
	border-right:5px solid black;
	padding-top:10px;
	padding-bottom:10px;
}

/* Contiene la paleta de color */

#paleta{
	margin:0 auto;
}

/* Clase común a cada caja de color */

.color{
	width: 80px;
	height: 50px;
	display:inline-block;
	margin-left:10px;
	border:medium solid transparent;
}

/* Ids correspondientes a cada uno de los colores */

#color1 {
	background-color: #F00;
}

#color2 {
	background-color: #0F0;
}

#color3 {
	background-color: #00F;
}

#color4 {
	background-color: #FF0;
}

#color5 {
	background-color: #0FF;
}

#color6 {
	background-color: #FFF;
}


/* Paleta de color seleccionada */
.seleccionado{
	border: 5px solid #000000;
}


/* Tablero de dibujo */
.zonadibujo{
	display:inline-block;
	
}

/* Cada fila del tablero de dibujo */
.filadibujo{
	margin:0px;
	padding:0px;
	height:12px;
}

/* Cada celda del tablero de dibujo */
.celdadibujo {
	width: 10px;
	height:10px;
	margin: 1px;
	padding: 0px;
	background-color:white;
	display:inline-block;
}

    • 3