如何得到一个 HTML 元素的背景颜色？

如何使用 JavaScript 获得任何元素(如 div)的背景颜色? 我试过:

<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) {
console.log('myDivObj.bgColor: ' + myDivObj.bgColor); // shows: undefined
console.log('myDivObj.backgroundcolor: ' + myDivObj.backgroundcolor); // shows: undefined
//alert ( 'myDivObj.background-color: ' + myDivObj.background-color ); // this is not a valid property :)
console.log('style:bgColor: ' + getStyle(myDivObj, 'bgColor')); //shows: undefined
console.log('style:backgroundcolor: ' + getStyle(myDivObj, 'backgroundcolor')); // shows:undefined:
console.log('style:background-color: ' + getStyle(myDivObj, 'background-color')); // shows: undefined
} else {
console.log('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>

214526 次浏览
小开
最佳答案

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);
小开

Using JQuery:

var color = $('#myDivID').css("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;

小开

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
小开

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");
小开

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/


提交答案