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

Question

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

score 100 · Accepted Answer

获取号码：

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

例子：

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

score 50 · Accepted Answer

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

alert(myDiv.style.backgroundColor);

score 25 · Accepted Answer

简单的解决方案

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

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

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

score 22 · Accepted Answer

使用 jQuery：

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

带原型：

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

使用纯 JS：

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

score 12 · Accepted Answer

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

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

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

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

score 10 · Accepted Answer

这对我有用：

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

score 3 · Accepted Answer

3

使用jQuery：

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

于 2009-12-11T10:19:54.530 回答

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

7 回答 7

Related

Reference