Question

我想在检查它是红色还是绿色后更改div的颜色。

我试过这个但是没有用。

if ($(this).css("background-color")=="rgb(34,187,69)"|| $(this).css("background-color")=="rgb(255,0,51)") {
    var s = confirm("Are you sure you want to pushback?");
    if (s == true) {
    $(this).css("background-color","#ffffff");  
   }

这是对的吗？

Answer 1

颜色因浏览器而异。所以在css中使用class并使用hasClass()检查jquery。

.green{
  background-color: green;
}

.red{
  background-color: red;
}

if ($(this).hasClass("green") || $(this).hasClass("red")) {
    var s = confirm("Are you sure you want to pushback?");
    if (s == true) {
    $(this).css("background-color","#ffffff");  
   }

Answer 2

另一个例子：

$(document).ready(function(){
  $('#wrap').click(function(){
  var color_ = $(this).css("background-color");
  var colorr = rgb2hex(color_);
  if (colorr=='#ff0000') {
    var s = confirm("Are you sure you want to pushback?");
    if (s == true) {
    $(this).css("background-color","#ffffff");  
      }
   } 
  });
});
  
  var hexDigits = new Array
        ("0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"); 

//Function to convert hex format to a rgb color
function rgb2hex(rgb) {
 rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
 return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}

function hex(x) {
  return isNaN(x) ? "00" : hexDigits[(x - x % 16) / 16] + hexDigits[x % 16];
 }

#wrap{
  background:red;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrap">Click Me</div>

Answer 3

试试这个：

 function changeColor(obj) {
    if ($(obj).css("background-color") == "rgb(34, 187, 69)" || $(obj).css("background-color") == "rgb(255, 0, 51)") {
        var s = confirm("Are you sure you want to pushback?");
        if (s == true) {
            $(obj).css("background-color", "#ffffff");
        }
    }
}

on html：

<input type="button" id="But_Change" value="changeColor" style="background-color: rgb(34,187,69)" onclick="changeColor(this)" />

Answer 4

每个浏览器都会返回不同的颜色值。但是还是试一试：

function componentToHex(c) {
var hex = c.toString(16);
return hex.length == 1 ? "0" + hex : hex;
}

function rgbToHex(r, g, b) {
return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
}

alert( rgbToHex(0, 51, 255) );

在此之后尝试比较。

Answer 5

浏览器将值返回为rgb（34,187,69）。但你把它比作rgb（34,187,69）。这就是它没有执行内部陈述的原因。

希望它能解决你的问题。

动态改变颜色

5 个答案: