Al usar javascript, ¿cómo obtengo el color de fondo de una celda de tabla cuando hago clic en ella?

Quiero que aparezca una ventana emergente de alerta que me muestra el fondo de una celda de tabla cada vez que hago clic en ella. Parece que no puedo encontrar o encontrar la manera de captar el color de fondo.

Mi celda de la tabla se ve así:

0 

Mi función selectCell se ve así:

 function selectCell(e){ alert(e.target.backgroundColor); //this gives me 'undefined' alert(e.target.bgcolor); //this gives me 'undefined' alert(e.target.bgColor); //nothing shows up. i don't believe this is a valid property //once i know i am properly grabbing the color i will do stuff with it here. } 

Mi CSS se ve así:

 #s0 { border: 1px solid; background-color: yellow; } 

¡Cualquier ayuda sería muy apreciada!

Los estilos de un nodo se encuentran en la propiedad de estilos, por ejemplo:

 e.target.style.backgroundColor; 

Sin embargo, esto solo funciona para los estilos declarados con el atributo de style en línea. Si CSS está asignado (como debería ser) utilizando una hoja de estilo, deberá usar:

 window.getComputedStyle(e.target, null).backgroundColor; 

Internet Explorer, desafortunadamente, no implementa la opción getComputedStyle() , sino que ofrece currentStyle (¿no es e.target tampoco es compatible con e.target , al menos en versiones anteriores a 8?). No tengo Internet Explorer para probar, pero los documentos sugieren que debe usarse:

 var e = window.event ? window.event : e, elementNode = e.target !== null ? e.target : e.srcElement; elementNode.currentStyle.backgroundColor; 

Referencias

  • currentStyle .
  • Element.style .
  • window.getComputedStyle() .

Puedes hacerlo fácilmente mediante la función Jquery css ()

 jQuery(document).ready(function(){ $(this).click(function () { var color = $(this).css("background-color"); alert(color); }); }); 

Para más detalles eche un vistazo a este ejemplo