动态改变背景颜色

Dynamically Change Background Color

本文关键字：颜色 背景 改变 动态      更新时间：2023-09-26

如果我有一个元素，我正在监听文档上的单击(可以在任何地方，这部分无关紧要)，并且每次单击，我希望元素的颜色变深，我如何在逻辑上或数字上改变它?

这是我尝试过的:

    on('click', function() {
        var myElementBG = myElement.backgroundColor;
        myElement.style.backgroundColor = myElementBG - 101010;
    });

这里的问题是，myElementBG返回"#707070"，所以试图从它减去101010产生NaN错误，因为'#'是值的一部分。

任何想法?

试试这个:

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

您可以使用hsl()值，其中l部分表示亮度，其中0%为黑色，100%为白色。除ie8及以下浏览器外，所有主流浏览器都有良好的支持

我会把颜色的值(不带'#')保存在另一个地方，例如作为div的属性。然后你可以很容易地增加/减少这个值，并将其设置为实际的背景色。

我已经做了一个例子(我使用jQuery来说明这一点，但这个想法在纯javascript中也是有效的)。

小提琴 

$(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"));
}

与其使用HEX代码，不如使用RGB颜色作为背景，然后您可以使用Jquery逐渐减少每个值(RGB)。

相关文章：