Verwenden von Javascript/jQuery zum Ändern von CSS basierend auf dem Textwert

Lesezeit: 2 Minuten

Benutzer-Avatar
Murphy1976

OK Stackoverflowianer, hier ist das Rätsel für den Tag.

Ich habe ein Wetter-Sidebar-Widget auf einer WordPress-Site, das alle seine Daten von der Google Weather API abfängt. Ich möchte einen Gradienten von ROT nach BLAU einstellen und dann durch die Magie der Javascript-Götter den Wert der Temperatur betrachten.

Höhere Zahl = näher an ROT
Niedrigere Zahl = näher an BLAU

Gibt es etwas, das dies tun kann? Oder müsste ich ganz von vorne anfangen?

  • Ich denke, die Frage ist etwas zweideutig, in dem Sinne, dass unklar ist, ob Sie versuchen, die Farbe von etwas (vielleicht Text) abhängig von der Temperatur zu ändern, oder ob Sie eine Verlaufsskala von Rot nach Blau haben und platzieren möchten eine Markierung irgendwo in der Skala, um der Temperatur zu entsprechen?

    – Richard Neil Ilagan

    22. Juni 2012 um 13:13 Uhr


Sie könnten die Farbe mit zwei Dimensionen wie folgt ausdrücken:

var max_temp = 50, // set maximum expected temperature
min_temp = -10, // set minimum temperature
temp_range = max_temp - min_temp, // calculate range
temp_rating = ((temp - min_temp) / temp_range) * 255 // express value in terms of the range multiplied by 255
red = temp_rating, // more temp = more red
blue = 255 - temp_rating; // more temp = less blue

Dann würde Ihre CSS-Farbe zu:

rgb(red, 0, blue)

Keine Ahnung, ob es schön aussehen wird 😉

  • Ich mag diese Version, sie ist dynamischer.

    – Murphy1976

    22. Juni 2012 um 14:00 Uhr

  • HINZUGEFÜGT – Das einzige Problem, auf das ich stoße, ist, dass dieses JavaScript-Snippet ausgeführt wird, bevor die Google-API-XML-Daten auf die Website geladen werden, sodass mein WERT für TEMP NULL ist.

    – Murphy1976

    22. Juni 2012 um 14:21 Uhr

Sie können dies mit tun jQuery:

$(document).ready(function(){
    $('#temp')​.change(function(){
        if($(this).val() < 47)
            $(this).removeAttr("class").addClass("cold");
        else
            $(this).removeAttr("class").addClass("hot");
    })​;
});

CSS

​.hot {background: #f00; color: #fff;}
.cold {background: #00f; color: #fff;}

HTML

​<input type="text" id="temp"​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ />​​​​​​​​​​​​​​​

Hoffe das hilft! FYI, die Geige. Alternativ können Sie verwenden .keyup() funktionieren auch! 🙂

Hier ist ein JSFiddle einer Anpassung einer ähnlichen Implementierung, die ich zum Generieren von Farben für JavaScript-Heatmap-Diagramme erstellt habe.

Sie übergeben einen Wert, einen Mindest- und einen Höchstwert, um einen Bereich zu definieren, der dann interpoliert und einen Hexadezimalwert generiert, wenn die im Skript definierte erste, letzte und Mittelpunktfarbe gegeben sind. Dies reicht von Rot bis Grün in einem Bereich von 0 bis 50, verarbeitet aber auch Werte außerhalb des Bereichs, indem die extremste Farbe bereitgestellt wird. Vielleicht kannst du das an deine Anforderungen anpassen?

1217110cookie-checkVerwenden von Javascript/jQuery zum Ändern von CSS basierend auf dem Textwert

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy