How to get the background color of an HTML element

Question

How can I get the background color of any element  like a div  using JavaScript  I have tried    x000D   x000D   lt html gt  x000D   x000D   lt body gt  x000D     lt div id  myDivID  style  background-color  red  gt shit happens lt  div gt  x000D     lt input type  button  value  click me  onclick  getColor     gt  x000D   lt  body gt  x000D   x000D   lt script type  text javascript  gt  x000D    function getColor     x000D      myDivObj   document getElementById  myDivID   x000D      if  myDivObj    x000D        console log  myDivObj bgColor      myDivObj bgColor      shows  undefined x000D        console log  myDivObj backgroundcolor      myDivObj backgroundcolor      shows  undefined x000D          alert    myDivObj background-color      myDivObj background-color       this is not a valid property    x000D        console log  style bgColor      getStyle myDivObj   bgColor       shows  undefined x000D        console log  style backgroundcolor      getStyle myDivObj   backgroundcolor        shows undefined  x000D        console log  style background-color      getStyle myDivObj   background-color        shows  undefined x000D        else   x000D        console log  damn    x000D        x000D      x000D       copied from  QuirksMode   - http   www quirksmode org dom getstyles html -    x000D    function getStyle x  styleProp    x000D      if  x currentStyle  x000D        var y   x currentStyle styleProp   x000D      else if  window getComputedStyle  x000D        var y   document defaultView getComputedStyle x  null  getPropertyValue styleProp   x000D      return y  x000D      x000D   lt  script gt  x000D   x000D   lt  html gt  x000D   x000D   x000D

User · Answer

Get at number   window getComputedStyle   Element    null  getPropertyValue   CSS       Example    window getComputedStyle  document body  null  getPropertyValue  background-color      window getComputedStyle  document body  null  getPropertyValue  width        document body clientWidth

User · Answer

It depends which style from the div you need  Is this a background style which was defined in CSS or background style which was added through javascript inline  to the current node   In case of CSS style  you should use computed style  Like you do in getStyle     With inline style you should use node style reference  x style backgroundColor   Also notice  that you pick the style by using camelCase non hyphen reference  so not background-color  but backgroundColor

User · Answer

With jQuery    jQuery   myDivID   css  background-color      With prototype      myDivID   getStyle  backgroundColor       With pure JS   document getElementById  myDivID   style backgroundColor

User · Answer

As with all css properties that contain hyphens  their corresponding names in JS is to remove the hyphen and make the following letter capital  backgroundColor  alert myDiv style backgroundColor

User · Answer

This worked for me   var backgroundColor   window getComputedStyle   window getComputedStyle myDiv  null  getPropertyValue  background-color     myDiv style backgroundColor    And  even better   var getStyle   function element  property        return window getComputedStyle   window getComputedStyle element  null  getPropertyValue property    element style property replace  -  a-z   g  function  g    return g 1  toUpperCase            var backgroundColor   getStyle myDiv   background-color

User · Answer

Simple solution  myDivObj   document getElementById  myDivID   let myDivObjBgColor   window getComputedStyle myDivObj  backgroundColor    Now the background color is stored in the new variable   https   jsfiddle net 7q1dpeo9 1

User · Answer

Using JQuery   var color       myDivID   css  background-color

[javascript] How to get the background color of an HTML element?

Examples related to javascript

Examples related to html

Examples related to background-color