How can I get the background color of any element, like a div, using JavaScript? I have tried:
<html>_x000D_
_x000D_
<body>_x000D_
<div id="myDivID" style="background-color: red">shit happens</div>_x000D_
<input type="button" value="click me" onclick="getColor();">_x000D_
</body>_x000D_
_x000D_
<script type="text/javascript">_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_
</script>_x000D_
_x000D_
</html>This question is related to
javascript
html
background-color
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");
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;
Using JQuery:
var color = $('#myDivID').css("background-color");
Simple solution
myDivObj = document.getElementById("myDivID")
let myDivObjBgColor = window.getComputedStyle(myDivObj).backgroundColor;
Now the background color is stored in the new variable.
With jQuery:
jQuery('#myDivID').css("background-color");
With prototype:
$('myDivID').getStyle('backgroundColor');
With pure JS:
document.getElementById("myDivID").style.backgroundColor
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
Source: Stackoverflow.com