如何避免 if 条件中的错误？答案

【问题标题】：How do i avoid error in the if condition?如何避免 if 条件中的错误？
【发布时间】：2014-07-08 14:21:30
【问题描述】：

function changeBGG1() {
     var a = $('#vbox').css("backgroundColor");
     if (a == "#800000") {
         $('#vbox').css("webkitAnimation", 'Red2Green 2s');
         $('#vbox').css("backgroundColor", '#004C00');
     }
 }

我知道条件检查中有错误，但我不知道如何避免它，因为没有解析颜色的方法。

【问题讨论】：

你应该使用一个类来设置动画并检查那个类
jquery 没有解析颜色十六进制格式的功能。
即使有，您也不应该检查 CSS 属性，而是重新定义逻辑以使用类并使用例如 if($('#vbox').hasClass('xxxx'))

标签： javascript jquery css colors

【解决方案1】：

在 CSS 中，背景颜色通常以 rgb(...) 格式返回，但并非总是。如果涉及透明度，它将是rgba(...) 格式。一些浏览器（尤其是旧的）会使用#RRGGBB 格式。

长话短说，您不能依赖backgroundColor 的值进行任何类型的比较。

改用.data() 属性。

【讨论】：

@user3648908 我认为这个答案的详细说明比您对问题的详细说明更多。
@KingKing 说得好！

【解决方案2】：

试试这个:)

$.fn.getHexBackgroundColor = function() {
    var rgb = $(this).css('background-color');
    rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
    function hex(x) {return ("0" + parseInt(x).toString(16)).slice(-2);}
    return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}


function changeBGG1() {
     var a = $('#vbox').getHexBackgroundColor();
     if (a == "#800000") {
         $('#vbox').css("webkitAnimation", 'Red2Green 2s');
         $('#vbox').css("backgroundColor", '#004C00');
     }
 }

【讨论】：

Uncaught ReferenceError: $ is not defined line 1 Uncaught TypeError: undefined is not a function 第8行
在任何其他 javascript 之前链接/导入 jquery
@user3648908 不要把这段代码放在 line1 上，把它放在 jquery script 标签之后

【解决方案3】：

var rgbString = "rgb(0, 70, 255)"; // get this in whatever way.

var parts = rgbString.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
// parts now should be ["rgb(0, 70, 255", "0", "70", "255"]

delete (parts[0]);
for (var i = 1; i <= 3; ++i) {
    parts[i] = parseInt(parts[i]).toString(16);
    if (parts[i].length == 1) parts[i] = '0' + parts[i];
} 
var hexString ='#'+parts.join('').toUpperCase();

通过这种方法，可以将 rgb 颜色转换为十六进制形式的字符串，并像 javascript 中的字符串一样正常进行比较。

【讨论】：