如果 DIV 颜色是红色的？ [复制]

Question

我制作了一个可以改变颜色的 DIV，但我正试图找到一种方法来知道它何时变红。这是我需要它做的事情：

if (DIV BACKGROUND COLOR RED) {
    alert("DIV IS RED");
}

我将如何做到这一点？

Answer 1

是的，可以通过使用属性更改 jquery 插件来做到这一点... 如我所见，您希望在颜色更改时自动触发事件...因此，您的代码将与它的工作示例类似...

    $("#myDiv").attrchange({
        trackValues: true, 
        // set to true so that the event object is updated with old & new values
        callback: function(evnt) {
            if(evnt.newValue.indexOf('background: red') > -1) { 
            // which attribute you want to watch for changes
              alert("DIV IS RED");  
            }
        }
    });
    
    function change(x){
    document.getElementById("myDiv").style.background=x;
    }

#myDiv{
background:green;
}

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://cdn.rawgit.com/meetselva/attrchange/master/js/attrchange.js"></script>
<script src="https://cdn.rawgit.com/meetselva/attrchange/master/js/attrchange_ext.js"></script>
<div id="myDiv">This Div Changes colors</div>

<button onclick="change('red');">Change To Red</button>
<button onclick="change('blue');">Change To Blue</button>
<button onclick="change('green');">Change To Green</button>

上面的代码会在div变红的时候提示信息...

Answer 2

您可以通过window.getComputedStyle(element).backgroundColor 访问element 的背景颜色。

这将是“rgb”或“rgba”表示形式的字符串，例如：

rgb(127, 127, 127)
rgba(127, 127, 127, 1)

如果元素的红色分量（第一个数字）大于其他颜色分量，则该元素为“红色”。 rgb 和 rgba 都有 3 个颜色分量，rgba 有一个额外的“alpha”（透明度）分量——我们可以忽略它，因为它不会影响“红色”。

我们将获取元素背景颜色的红绿和蓝分量，如果元素的红色分量大于绿色和蓝色分量，则认为元素为“红色”：

var isRed = function(element) {
  var bg = window.getComputedStyle(element).backgroundColor;
  if (!bg) return false; // Sometimes there is no background color, in which case the element isn't red

  // Otherwise, `bg` is a string:
  var rb = bg.indexOf('(');
  
  bg = bg.substr(rb + 1); // Trim off everything up until and including the "(" character
  bg = bg.split(','); // Split on the "," delimiter
    
  var r = parseInt(bg[0].trim());
  var g = parseInt(bg[1].trim());
  var b = parseInt(bg[2].trim());
  
  return r > g && r > b;
};

console.log('#red?', isRed(document.getElementById('red')));
console.log('#green?', isRed(document.getElementById('green')));
console.log('#blue?', isRed(document.getElementById('blue')));
console.log('#quiteRed?', isRed(document.getElementById('quiteRed')));
console.log('#notRed?', isRed(document.getElementById('notRed')));
console.log('#transparentRed?', isRed(document.getElementById('transparentRed')));

.col {
  width: 100%;
  height: 30px;
  color: #ffffff;
  line-height: 30px;
}
#red { background-color: #ff0000; }
#green { background-color: #00ff00; }
#blue { background-color: #0000ff; }
#quiteRed { background-color: rgb(220, 130, 120); }
#notRed { background-color: #80b0c0; }
#transparentRed { background-color: rgba(200, 50, 50, 0.4); }

<div class="col" id="red">red</div>
<div class="col" id="green">green</div>
<div class="col" id="blue">blue</div>
<div class="col" id="quiteRed">quiteRed</div>
<div class="col" id="notRed">notRed</div>
<div class="col" id="transparentRed">transparentRed</div>