Question

如果我有一个元素并且我正在聆听文档上的点击（可以在任何地方，这部分并不重要），并且每次点击，我希望元素颜色变深，我该如何在逻辑上或数字上改变它？

这就是我的尝试：

    on('click', function() {

        var myElementBG = myElement.backgroundColor;

        myElement.style.backgroundColor = myElementBG - 101010;
    });

这里的问题是myElementBG返回＆＃34;＃707070＆＃34;，因此尝试从中减去101010会产生NaN错误，因为＆＃39;＃＆＃39;是价值的一部分。

有什么想法吗？

Answer 1

试试这个：

JsFiddle

function subtractColorsHex(a, b) {
    a = a.replace('#', '');
    // We don't expect '#' symbol in b
    var decA = parseInt(a, 16);
    var decB = parseInt(b, 16);
    var resultDec = decA - decB;
    var resultHex = Math.abs(resultDec).toString(16);

    return "#" + "000000".substring(0, 6 - resultHex.length) + resultHex;
}

用法：

subtractColorsHex('#070707', '101010');

Answer 2

你可以使用hsl（）值，其中l部分代表亮度，其中0％是黑色，100％是白色。除IE 8及以下版本外，所有主流浏览器都有很好的支持。

Answer 3

我会将颜色的值（没有'＃'）保存在另一个地方，例如作为div的属性。然后，您可以轻松地增加/减少此值并将其设置为实际背景颜色。

我做了一个例子（我使用jQuery来说明这一点，但这个想法在纯JavaScript中也是有效的。）

<强> Fiddle

$(document).ready(function(){
    $("div").attr("data-color", "F0F0F0");

    paintBackground();

    $(document).click(function(){
        makeDivDarker();
    });
});

function makeDivDarker(){
    $div = $("div");
    var currentColor = parseInt($div.attr("data-color"), 16);
    var newColor = currentColor - parseInt("101010", 16);
    $div.attr("data-color", newColor.toString(16));
    paintBackground();
}

function paintBackground(){
    var $div = $("div");
    $div.css("background-color", "#" + $div.attr("data-color"));
}

Answer 4

为什么不使用RGB颜色作为背景，而不是使用HEX代码，然后您可以使用Jquery逐渐减少每个值（RGB）。

动态更改背景颜色

4 个答案: