Question

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

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

Answer 1

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

长话短说，你不能依赖backgroundColor的价值进行任何比较。

改为使用.data()属性。

Answer 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');
     }
 }

Answer 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中的字符串一样进行比较。

如何在if条件下避免错误？

3 个答案: