Question

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

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

我将如何做到这一点？

Answer 1

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

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

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

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

我们将获得元素背景颜色的红绿蓝组件，如果红色组件的颜色大于绿色和蓝色组件，则将其视为“红色”：

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>

Answer 2

是可以通过使用属性更改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变为红色时，上面的代码会提示一条消息......

如果DIV颜色是红色的？

2 个答案: