javascript - js 使颜色变亮/变暗

Question

我正在尝试创建一些 jQuery 函数，将对象 bgcolor 更改为更亮或更暗(您将参数设置为色调差异)。我认为它应该可以工作，但是它破裂了。

$.fn.changeBg = function(difference){




    var hexToRgb = function(hex) {
        var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
        return result ? {
            r: parseInt(result[1], 16),
            g: parseInt(result[2], 16),
            b: parseInt(result[3], 16)
        } : null;
    }

    var rgbToHex = function(r, g, b) {
        return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
    }

    //returns color n-tones lighter or darker (for negavitve values) from given.
    var changeColor = function(hex,tones){
        var rgb = hexToRgb(hex);
        rgb.r+=tones;
        rgb.g+=tones;
        rgb.b+=tones;

        rgb.r=rgb.r>255?255:rgb.r;
        rgb.r=rgb.r<0?0:rgb.r;

        rgb.g=rgb.g>255?255:rgb.g;
        rgb.g=rgb.g<0?0:rgb.g;

        rgb.b=rgb.b>255?255:rgb.b;
        rgb.b=rgb.b<0?0:rgb.b;

        var hex = rgbToHex( rgb.r , rgb.g , rgb.b );
        return hex;
    }

    var bgColor = $(this).css('background-color');
    var secColor = changeColor(bgColor,difference);
    $(this).css('background-color',secColor);

}

Fiddle - 知道这有什么问题吗？

Answer 1

无论原始 CSS 如何，

bgColor 不一定采用 #RRGBB 格式。它可以是以下任何一个:

• #RRGGBB
• #RGB
• rgb(R,G,B)
• rgba(R、G、B、A)
• 姓名

你必须解析它们中的每一个。

如果您可以在 JavaScript 源代码中以正确的格式保存原始颜色，那就容易多了。