jQuery: text Ändern, Farbe auf das element mit der Hintergrundfarbe?

Möchte ich den text ändern der Farbe eines Elements auf das element die Hintergrundfarbe.

Zum Beispiel, wenn die Hintergrundfarbe in schwarz geändert, anschließend den text weiß. Wenn die Hintergrundfarbe ist weiß geändert, dann Mach den text schwarz.

Wäre es ein bisschen komplexer als dass, obwohl, als der Benutzer kann die Hintergrundfarbe ändern, um was auch immer Sie möchten.

Fand ich einige zufällige Artikel über Handhabung des Backends, aber nichts mit javascript (oder noch besser, jQuery).

InformationsquelleAutor Shpigford | 2011-07-19
  1. 13

    Erstellen Sie zunächst eine Funktion, die bestimmt, ob eine Farbe dunkel ist oder nicht (Quelle, modifiziert):

    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)
}

    Dann verwenden Sie etwas entlang der Linien von:

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

    http://jsfiddle.net/QkSva/

    • Ich hatte zu zwicken, die Mathematik und die übereinstimmenden rgb-Werten in Ganzzahlen konvertiert werden, aber insgesamt funktioniert es Super!
    • Du hast vergessen zu konvertieren, das entspricht int : return parseFloat(match[1]) + parseFloat(match[2]) + parseFloat(match[3]) < (3 * (256 / 2)); Gute Arbeit, ich Liebe diese Art von tricks ^^
    InformationsquelleAutor pimvdb
  2. 0

    Ich schlage vor, Sie tun, verwenden Sie css-themes, also änderung an der css-Datei, für, die. Aber Sie können es tun mit 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>

    dies ist nur die einfache Lösung, wenn Sie wirklich wollen, um dieses wäre es gut zu setzen
    eine Veranstaltung, die auf änderungen im hintergrund.

    hoffe, das hilft

    InformationsquelleAutor dknaack
Schreibe einen Kommentar