Javascript 动态改变颜色

我想在检查过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");  
   } 

---

这是否正确？

颜色因浏览器而异。因此，在css中使用类并使用jquery检查

hasClass（）

---

颜色因浏览器而异。因此，在css中使用类并使用jquery检查

hasClass（）

另一个例子：

$（文档）.ready（函数（）{
$（'#wrap'）。单击（函数（）{
var color=$（this.css（“背景色”）；
var colorr=rgb2hex（颜色）；
如果（colorr='#ff0000'）{
var s=确认（“您确定要后退吗？”）；
如果（s==true）{
$（this.css（“背景色”，“#ffffff”）；
}
} 
});
});
var hexDigits=新数组
（“0”、“1”、“2”、“3”、“4”、“5”、“6”、“7”、“8”、“9”、“a”、“b”、“c”、“d”、“e”、“f”）；
//函数将十六进制格式转换为rgb颜色
函数rgb2hex（rgb）{
rgb=rgb.match（/^rgb\（\d+）\s*（\d+）\s*（\d+）$/）；
返回“#”+hex（rgb[1]）+hex（rgb[2]）+hex（rgb[3]）；
}
函数十六进制（x）{
返回isNaN（x）？“00”：十六进制数字[（x-x%16）/16]+十六进制数字[x%16]；
}

#换行{
背景：红色；
}

单击我

另一个示例：

$（文档）.ready（函数（）{
$（'#wrap'）。单击（函数（）{
var color=$（this.css（“背景色”）；
var colorr=rgb2hex（颜色）；
如果（colorr='#ff0000'）{
var s=确认（“您确定要后退吗？”）；
如果（s==true）{
$（this.css（“背景色”，“#ffffff”）；
}
} 
});
});
var hexDigits=新数组
（“0”、“1”、“2”、“3”、“4”、“5”、“6”、“7”、“8”、“9”、“a”、“b”、“c”、“d”、“e”、“f”）；
//函数将十六进制格式转换为rgb颜色
函数rgb2hex（rgb）{
rgb=rgb.match（/^rgb\（\d+）\s*（\d+）\s*（\d+）$/）；
返回“#”+hex（rgb[1]）+hex（rgb[2]）+hex（rgb[3]）；
}
函数十六进制（x）{
返回isNaN（x）？“00”：十六进制数字[（x-x%16）/16]+十六进制数字[x%16]；
}

#换行{
背景：红色；
}

单击我

尝试以下操作：

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

关于html：

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

试试这个：

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

关于html：

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

---

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

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

---

尝试在此之后进行比较。

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

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

---

尝试在此之后进行比较。

浏览器返回的值为rgb（3418769）。但您将其比较为rgb（34187,69）。这就是它不执行内部语句的原因

---

希望它能解决您的问题。

浏览器返回的值为rgb（3418769）。但您将其比较为rgb（34187,69）。这就是它不执行内部语句的原因

---

希望它能解决您的问题。

背景色返回的值取决于浏览器。。。因此，一个更好的解决方案是，如果可能的话，检查某个类。我之前为div设置了特定的颜色，并且我已经提到了该颜色的rgb值。您的代码似乎也有问题。您将

确认

的结果存储在

var s

中，但之后您正在检查名为

r

的变量，您是否可以尝试像

控制台.log（this，$（this）.css（“background color”）

那样记录值以查看返回的内容背景色返回的值取决于浏览器。。。因此，一个更好的解决方案是，如果可能的话，检查某个类。我之前为div设置了特定的颜色，并且我已经提到了该颜色的rgb值。您的代码似乎也有问题。在

var s

中存储

confirm

的结果，但之后检查名为

r

的变量，是否可以尝试像

console.log（this，$（this）.css（“背景色”）

那样记录值以查看返回的内容