Question

寻找一个简单的java脚本，以及如果值为：0-30 =绿色30-60 =黄色60-100 =红色将改变字体颜色的html。

请原谅写得不好的psudo-ish代码......

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

Answer 1

许多不同的方法可以做到这一点。首先，请勿使用font代码they are deprecated

标记

<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

Answer 2

更好地使用CSS类来完成这些事情。如果您的代码不直接修改样式，那么这是一种很好的做法。学习如何使用像JQuery这样的工具（编写纯javascript需要花费很多时间） http://api.jquery.com/addclass/

HTML：

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

示例CSS：

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

JQuery的

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

    ...
});

javascript根据条件更改文本的颜色

2 个答案:

标记

JS