Question

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

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

虽然用户可以将背景颜色更改为他们想要的任何颜色，但它会比这更复杂。

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

Answer 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/

Answer 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>

这只是一个简单的解决方案，如果你真的想要这个，那么设置就好了关于背景变化的事件。

希望有所帮助

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

2 个答案: