¿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, utilizando javascript. He intentado: -¿Cómo obtener el color de fondo de un elemento usando javascript?

<html> 
    <body> 
     <div id="myDivID" style="background-color: red">shit happens</div> 
     <input type="button" value="click me" onclick="getColor();"> 
    </body> 

    <script type="text/javascript"> 
     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; 
     } 
    </script> 
</html>

Fuente

2009-12-11 Rakesh Juyal

Tenga en cuenta que la respuesta aceptada (en la actualidad) sólo funcionará bajo un conjunto muy restringido de circunstancias. – NickFitz

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

alert(myDiv.style.backgroundColor);

Fuente

2009-12-11 10:18:52

¡Maldición! eso fue muy fácil :) –

David, por favor, hágamelo saber por qué 'getStyle' se usa en' http: // www.quirksmode.org/dom/getstyles.html', cuando era tan fácil obtener la propiedad de estilo. –

y la página a la que se vincula tiene algunas descripciones en sí misma sobre lo que es bueno. para mozilla, por ejemplo, usa 'getComputedStyle', que no es tanto lo que se especifica en la hoja de estilo, sino más bien lo que se muestra, como resultado del marcado HTML * y * estilo CSS. Sin embargo, para algo tan simple como este escenario, no veo ninguna razón realmente buena para usar esa función. –

Usando JQuery:

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

Fuente

2009-12-11 10:19:54 Aziz

el div antes del selector de id es un poco redundante – AutomatedTester

Acepto, corregido :) – Aziz

+14

descargando y ejecutando una biblioteca de 20kb para recuperar el color de fondo de un DIV es un poco redundante;) –

Depende del estilo de div que necesite. ¿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 hace en getStyle.

Con estilo en línea debe usar node.style referencia: x.style.backgroundColor;

También tenga en cuenta que elige el estilo utilizando la referencia CamelCase/non hyphen, entonces no background-color, pero backgroundColor;

Fuente

2009-12-11 10:24:11 nemisj

con jQuery:

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

Con prototipo:

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

Con JS puros:

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

Fuente

2009-12-11 11:18:01 user228807

por cierto, la comprobación del seguimiento ing getElementsByClassName implementada la función comparaciones de uso: http://ejohn.org/blog/getelementsbyclassname-in-firefox-3/

Fuente

2011-12-28 20:47:42 nadavkav

Obtener al 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

Fuente

2014-09-23 09:44:03 phnghue

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

Respuesta

Cuestiones relacionadas