如何获取 HTML 元素的背景颜色？答案

【问题标题】：How to get the background color of an HTML element?如何获取 HTML 元素的背景颜色？
【发布时间】：2010-12-25 14:50:38
【问题描述】：

如何使用 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>

【问题讨论】：

请注意，（当前）接受的答案仅在非常有限的情况下有效。

标签： javascript html background-color

【解决方案1】：

获取号码：

window.getComputedStyle( *Element* , null).getPropertyValue( *CSS* );

例子：

window.getComputedStyle( document.body ,null).getPropertyValue('background-color');  
window.getComputedStyle( document.body ,null).getPropertyValue('width');  
~ document.body.clientWidth

【讨论】：

null不能写
第二个参数是一个可选属性，用于指定伪元素，因此可以安全地省略它。请参阅此处的文档：developer.mozilla.org/en-US/docs/Web/API/Window/…

【解决方案2】：

与所有包含连字符的css属性一样，它们在JS中对应的名称是去掉连字符并将以下字母变为大写：backgroundColor

alert(myDiv.style.backgroundColor);

【讨论】：

David 请告诉我为什么在http://www.quirksmode.org/dom/getstyles.html 中使用getStyle，当时很容易获得样式属性。
你链接到的页面本身就有一些关于它的好处的描述。例如，对于 mozilla，它使用 getComputedStyle，这与其说是样式表中指定的内容，不如说是由于 HTML 标记和 CSS 样式而显示的内容。不过，对于像这种情况这样简单的事情，我认为没有任何真正好的理由使用该功能。
style 属性仅包含在style 属性中分配或由脚本设置的样式。在style 元素或外部样式表中设置的样式不会在那里找到，此时您需要针对不同浏览器的不同技术（除了 IE 之外的所有标准技术，像往常一样），ppk 的quirksmode 脚本将负责.

【解决方案3】：

简单的解决方案

myDivObj = document.getElementById("myDivID")
let myDivObjBgColor = window.getComputedStyle(myDivObj).backgroundColor;

现在背景颜色存储在新变量中。

https://jsfiddle.net/7q1dpeo9/1/

【讨论】：

与接受的答案相反，即使它是通过类分配的，它也会给出颜色。

【解决方案4】：

使用 jQuery：

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

带原型：

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

纯JS：

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

【讨论】：

【解决方案5】：

这取决于您需要 div 中的哪种样式。这是CSS中定义的背景样式还是通过javascript(inline)添加到当前节点的背景样式？

如果是CSS 样式，您应该使用计算样式。就像你在getStyle() 做的那样。

对于内联样式，您应该使用 node.style 参考：x.style.backgroundColor;

另请注意，您通过使用驼峰式/非连字符引用来选择样式，所以不是background-color，而是backgroundColor；

【讨论】：

【解决方案6】：

这对我有用：

var backgroundColor = window.getComputedStyle ? window.getComputedStyle(myDiv, null).getPropertyValue("background-color") : myDiv.style.backgroundColor;

而且，甚至更好：

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

【讨论】：

【解决方案7】：

使用JQuery：

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

【讨论】：

id选择器前面的div有点多余
下载并执行一个 20kb 的库来检索 DIV 的背景颜色有点多余 ;)
@David：抱歉，大卫，虽然我想给你 +20 次重复，但我不允许我这样做 :)。为你+1。完全同意。
好吧，如果整个页面只使用javascript来获取背景颜色，那是多余的，但通常一个页面在javascript中完成的事情要多得多，这使得使用JQuery有点合理.
那些想要避免使用 jQuery 的人会发现 this blog 很有用。简而言之：您必须了解特定于浏览器的详细信息/功能。