javascript ändern der Farbe von text auf Grundlage einer Bedingung

Suche nach einem einfachen java-script und html-Code, ändern Sie die Farbe der schriftart, falls die Werte:0-30 = grün 30-60 = gelb 60-100 = rot.

Entschuldigt die schlecht geschrieben psudo-ish-code hier...

    <script>
    var low=green;
    var medium=yellow;
    var error=red;

    function changeColor{

    if  var low then display green;
    if var medium then display yellow;
    if var error then display red

    }

    </script>


    <body>
    <p><font color=(changeColor)>30</font></p>
    </body>
  • Tut mir Leid, aber du bist nicht "Suchen", Sie sind "bittet für uns, nach Ihnen zu suchen". Hast du etwas ausprobieren?
  • Ich Tat, tut mir Leid, wenn meine Programmierung ist so schlecht, dass es klingt, wie ich es nicht versucht hätte. Die Bildung dieser psuedocode war mein Versuch zu versuchen, um in der Nähe eine Antwort. Die Forschung habe ich einfach nur verwirrt mich mehr. Aber wie es aussieht, gibt es einige hilfreiche Vorschläge unten.
  • Antwort wurde gelöst, indem 2 Mitwirkende unten. Sorry, es war zu breit.
InformationsquelleAutor user3685268 | 2014-05-28
  1. 3

    Viele verschiedene Möglichkeiten, dies zu tun. First off, nicht mit einem font tag Sie sind veraltet

    Markup

    <p>
<span>30</span>
</p>

    JS

    var colorThreshold = 10,
    spanText = document.querySelector('span');

function changeColor(val) {
    var color = "green";

    if (val > 30 && val < 60) {
        color = "yellow";
    } else if (val >= 60) {
        color = "red";
    }

    spanText.style.color = color;
}

changeColor(colorThreshold);

    Live-Demo

    • wunderbar hilfreich für einen Neuling wie mich, der jsfiddle-link hilft auch!
    InformationsquelleAutor Loktar
  2. -2

    Besser verwenden CSS-Klassen für solche Dinge. Es ist gute Praxis, wenn Sie Ihren code nicht ändern Stil direkt. Lernen Sie die Verwendung von tools wie JQuery (schreiben von reinen javascript-nimmt sich viel Zeit)
    http://api.jquery.com/addclass/

    HTML:

    <body><p class="change-me">30</p></body>

    Beispiel-CSS:

    .color1 {
    color:red;
}
.color2 {
    color:blue;
}

    JQuery

    $('.change-me').each(function() {
    if(parseInt($(this).html()) < 30) {
        $(this).addClass('color1');
    }

    ...
});
    • Ich werde erkunden Sie das auch, danke!
    InformationsquelleAutor Łukasz Pijet
Schreibe einen Kommentar