Javascript 如何获取 HTML 元素的背景颜色？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1887104/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get the background color of an HTML element?
提问by Rakesh Juyal
How can I get the background color of any element, like a div, using JavaScript? I have tried:
如何div使用 JavaScript获取任何元素的背景颜色，例如 a ？我试过了：
<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>采纳答案by dxh
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
和所有包含连字符的 css 属性一样，它们在 JS 中的对应名称是将连字符去掉，并将下面的字母变为大写： backgroundColor
alert(myDiv.style.backgroundColor);
回答by phnghue
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
回答by user228807
With jQuery:
使用 jQuery：
jQuery('#myDivID').css("background-color");
With prototype:
带原型：
$('myDivID').getStyle('backgroundColor');
With pure JS:
使用纯 JS：
document.getElementById("myDivID").style.backgroundColor
回答by nemisj
It depends which style from the div you need. Is this a background style which was defined in CSSor background style which was added through javascript(inline)to the current node?
这取决于您需要的 div 样式。这是在当前节点中定义的CSS背景样式还是添加javascript(inline)到当前节点的背景样式？
In case of CSSstyle, you should use computed style. Like you do in getStyle().
在CSS样式的情况下，您应该使用计算样式。就像你在getStyle().
With inline style you should use node.stylereference: x.style.backgroundColor;
对于内联样式，您应该使用node.stylereference: x.style.backgroundColor;
Also notice, that you pick the style by using camelCase/non hyphen reference, so not background-color, but backgroundColor;
另请注意，您通过使用驼峰式大小写/非连字符引用来选择样式，因此不是background-color, but backgroundColor;
回答by Rehmat
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");
回答by Husky931
Simple solution
简单的解决方案
myDivObj = document.getElementById("myDivID")
let myDivObjBgColor = window.getComputedStyle(myDivObj).backgroundColor;
Now the background color is stored in the new variable.
现在背景颜色存储在新变量中。
