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

IT技术 javascript html background-color
2021-02-05 09:08:16

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

6个回答

获取号码：

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 不能写
2021-04-05 09:08:16
第二个参数是用于指定伪元素的可选属性，因此可以安全地省略它。请参阅此处的文档：developer.mozilla.org/en-US/docs/Web/API/Window/...
2021-04-09 09:08:16

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

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

简单的解决方案

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

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

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

与接受的答案相反，即使它是通过类分配的，也会给出颜色。
2021-04-10 09:08:16

使用 jQuery： 

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

带原型：

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

使用纯 JS：

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

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

在CSS样式的情况下，您应该使用计算样式。就像你在getStyle().

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

另请注意，您通过使用驼峰式大小写/非连字符引用来选择样式，因此不是background-color, but backgroundColor;

其它你可能感兴趣的问题
上一篇Javascript获取对象键名 下一篇使用 Javascript/jQuery 从外部样式表获取 CSS 值