使用jquery/javascript增加点击时的CSS亮度颜色？

因此，如果我有一个文本“单击我以使其变亮”，它具有某种深绿色十六进制颜色的CSS颜色属性，如“#00801a”，我想使它在单击时变为浅绿色。同样，如果它是某种蓝色，点击它会使它变成浅蓝色。基本上，我想知道是否有一种方法可以在不知道实际颜色的情况下更改css颜色。

如果它有白色背景，您可以降低不透明度，让白色发光，从而获得更亮的阴影。

转换为HSV以更改亮度

此版本使用

HSV

。我将原始的

rgb

值转换为

hsv

，并更改

v

的值以获得较浅的颜色。我从尖锐的回答中得到了答案，我只是为格雷加了一个小补丁。我得到了

当页面加载时，我将

rgb

转换为

hsv

更改

v

值，转换回

rgb

并使用新值更改元素的

css

function AppendColor(light) {
    $(".dark").each(function(i){
      // get the RGB from existing elements
        var color = $(this).css("background-color");
        color = color.replace(/[^0-9,]+/g, "");
        var red = color.split(",")[0];
        var gre = color.split(",")[1];
        var blu = color.split(",")[2];

      // convert rgb to hsv
        var hsv = RgbToHsv(red,gre,blu);
      // convert hsv to rgb modifing the `v` param
        var rgb = HsvToRgb(hsv.h, hsv.s, light);

      // creates a new div and set the new background
      // then appends to the content
        color = "rgb(" + rgb.r + "," + rgb.g + "," + rgb.b + ")";
        $("<div />")
            .css("background", color)
            .attr("title", color)
            .appendTo($(".light").parent());
        $("<span />").html(" ").appendTo($(".light").parent())
    });
    $("<br />").appendTo($(".light").parent())
}

// tested values
AppendColor(25);
AppendColor(50);
AppendColor(75);
AppendColor(90);
AppendColor(95);
AppendColor(97);
AppendColor(99);
AppendColor(100);

底部的

divs

将从黑暗中获得浅色

单击暗div时，它将检索

背景色

，拆分值并发送到函数

Lighthen

。此功能将使颜色更亮

function Lighthen(red, green, blue)
{
    var max = ([red,green,blue].sort(function(l,r){return r-l}))[0];
    var multiplier = max;
    multiplier = (multiplier / 255) + 1;

    // if it would still be too dark, make it lighten more
    if (multiplier < 1.5) multiplier = 1.9;

    // if it gets to white, move away a bit
    if ((max * multiplier) > 255)
    {
        multiplier = (multiplier / 230) + 1;
    }

    var r = Math.round(red * multiplier);
    var g = Math.round(green * multiplier);
    var b = Math.round(blue * multiplier);

    if (r > 255) r = 255;
    if (g > 255) g = 255;
    if (b > 255) b = 255;

    return "rgb(" + r + "," + g + "," + b + ")";
}

导致

---

坏主意。这使得文本不透明，看起来很难看。您是否考虑过使用

hsl（h，s，l）

，您可以增加/减少l（亮度）来完成所需的操作。hsl由FF4、Chrome、Safari和（神奇的）IE9支持

function Lighthen(red, green, blue)
{
    var max = ([red,green,blue].sort(function(l,r){return r-l}))[0];
    var multiplier = max;
    multiplier = (multiplier / 255) + 1;

    // if it would still be too dark, make it lighten more
    if (multiplier < 1.5) multiplier = 1.9;

    // if it gets to white, move away a bit
    if ((max * multiplier) > 255)
    {
        multiplier = (multiplier / 230) + 1;
    }

    var r = Math.round(red * multiplier);
    var g = Math.round(green * multiplier);
    var b = Math.round(blue * multiplier);

    if (r > 255) r = 255;
    if (g > 255) g = 255;
    if (b > 255) b = 255;

    return "rgb(" + r + "," + g + "," + b + ")";
}

$(".dark").click(function(){
    var color = $(this).css("background-color");
    color = color.replace(/[^0-9,]+/g, "");
    var red = color.split(",")[0];
    var gre = color.split(",")[1];
    var blu = color.split(",")[2];

    $("#l" + $(this).attr("id"))
        .css("background", Lighthen(red, gre, blu));
});