jQuery: изменить цвет текста в зависимости от цвета фона элемента?

Question

Я хочу изменить цвет текста элемента на основе цвета фона элемента.

Например, если цвет фона меняется на черный, то сделайте текст белым. Если цвет фона меняется на белый, то сделайте текст черным.

Это было бы немного сложнее, чем это, хотя пользователь может изменить цвет фона на любой, какой ему захочется.

Я нашел несколько случайных статей о том, как обрабатывает его на бэкэнде , но ничего не использует javascript (или, что еще лучше, jQuery).

Answer 1

Сначала создайте функцию, которая определяет, является ли цвет темным или нет ( источник , изменен):

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>

это только простое решение, если вы действительно хотите этого, было бы хорошо установить событие об изменении фона.

надеюсь, что помогает