jQuery：根据包含元素的背景颜色更改文本颜色？答案

【问题标题】：jQuery: Change text color based on containing element's background color?jQuery：根据包含元素的背景颜色更改文本颜色？
【发布时间】：2023-03-14 13:03:01
【问题描述】：

我想根据元素的背景颜色更改元素的文本颜色。

例如，如果将背景颜色更改为黑色，则将文本设置为白色。如果背景颜色变为白色，则将文本变为黑色。

这会比这更复杂一些，因为用户可以将背景颜色更改为他们想要的任何颜色。

我发现了一些关于 handling it on the backend 的随机文章，但没有使用 javascript（或者更好的是 jQuery）。

【问题讨论】：

Change text color based on brightness of the covered background area?的可能重复

标签： jquery text colors element

【解决方案1】：

首先，创建一个判断颜色是否深的函数（source，已修改）：

function isDark( color ) {
    var match = /rgb\((\d+).*?(\d+).*?(\d+)\)/.exec(color);
    return parseFloat(match[1])
         + parseFloat(match[2])
         + parseFloat(match[3])
           < 3 * 256 / 2; // r+g+b should be less than half of max (3 * 256)
}

然后，使用以下内容：

$('elem').each(function() {
    $(this).css("color", isDark($(this).css("background-color")) ? 'white' : 'black');
});

http://jsfiddle.net/QkSva/

【讨论】：

我不得不调整数学并且必须将匹配的 rgb 值转换为整数，但总的来说效果很好！
您忘记将匹配项转换为 int ： return parseFloat(match[1]) + parseFloat(match[2]) + parseFloat(match[3])

【解决方案2】：

我建议您使用 css 主题，因此请更改为 css 文件。但是你可以用 jQuery 做到这一点。

<script src="../../Scripts/jquery-1.5.1.js" type="text/javascript"></script>
<script>
    $().ready(function () {
        var color = $("body").css("backgroundColor");
        if (color == "...")
            $("body").css("color", "...");
    });
</script>

这只是简单的解决方案，如果你真的想要这个，最好设置背景变化的事件。

希望对你有帮助

【讨论】：