¿Cómo obtener el color de fondo de un elemento usando javascript?

¿Cómo puedo obtener el color de fondo de cualquier elemento, digamos Div, usando javascript? Lo intenté:-

  
shit happens
function getColor(){ myDivObj = document.getElementById("myDivID") if ( myDivObj ){ alert ( 'myDivObj.bgColor: ' + myDivObj.bgColor ); // shows: undefined alert ( 'myDivObj.backgroundcolor: ' + myDivObj.backgroundcolor ); // shows: undefined //alert ( 'myDivObj.background-color: ' + myDivObj.background-color ); // this is not a valid property :) alert ( 'style:bgColor: ' + getStyle ( myDivObj, 'bgColor' ) ); //shows: undefined alert ( 'style:backgroundcolor: ' + getStyle ( myDivObj, 'backgroundcolor' ) ); // shows:undefined: alert ( 'style:background-color: ' + getStyle ( myDivObj, 'background-color' ) ); // shows: undefined }else{ alert ( 'damn' ); } } /* copied from `QuirksMode` - http://www.quirksmode.org/dom/getstyles.html - */ function getStyle(x,styleProp) { if (x.currentStyle) var y = x.currentStyle[styleProp]; else if (window.getComputedStyle) var y = document.defaultView.getComputedStyle(x,null).getPropertyValue(styleProp); return y; }

Al igual que con todas las propiedades CSS que contienen guiones, sus nombres correspondientes en JS es eliminar el guión y hacer el siguiente mayúscula de la letra: backgroundColor

 alert(myDiv.style.backgroundColor); 

Obtener en el número:

 window.getComputedStyle( *Element* , null).getPropertyValue( *CSS* ); 

Ejemplo:

 window.getComputedStyle( document.body ,null).getPropertyValue('background-color'); window.getComputedStyle( document.body ,null).getPropertyValue('width'); ~ document.body.clientWidth 

Con jQuery:

 jQuery('#myDivID').css("background-color"); 

Con prototipo:

 $('myDivID').getStyle('backgroundColor'); 

Con JS puro:

 document.getElementById("myDivID").style.backgroundColor 

Depende del estilo del div que necesites. ¿Es este un estilo de fondo que se definió en CSS o estilo de fondo que se agregó mediante javascript (en línea) al nodo actual?

En el caso del estilo CSS, debe usar el estilo calculado. Como lo haces en getStyle .

Con el estilo en línea, debe usar la referencia x.style.backgroundColor : x.style.backgroundColor ;

También tenga en cuenta que elige el estilo utilizando la referencia de CamelCase / non hyphen, por lo que no es background-color , sino backgroundColor ;

Usando JQuery :

 var color = $('#myDivID').css("background-color"); 

Esto funcionó para mí:

 var backgroundColor = window.getComputedStyle ? window.getComputedStyle(myDiv, null).getPropertyValue("background-color") : myDiv.style.backgroundColor; 

Y, aún mejor:

 var getStyle = function(element, property) { return window.getComputedStyle ? window.getComputedStyle(element, null).getPropertyValue(property) : element.style[property.replace(/-([az])/g, function (g) { return g[1].toUpperCase(); })]; }; var backgroundColor = getStyle(myDiv, "background-color"); 

Por cierto, revise las siguientes comparaciones de uso de la implementación de la función getelementsbyclassname: http://ejohn.org/blog/getelementsbyclassname-in-firefox-3/