Question

可能重复：
How do I change the background color with Javascript?

我有这个javascript函数可以正常工作，但我想添加它。

风险的计算方法是将严重程度乘以可能性。计算由validate_form（）

下面的函数完成

根据值的颜色是：

绿色 - 小于6的输入字段将颜色更改为绿色
橙色 - 介于6 - 9之间
红色 - 如果超过9

风险值写入并输入名为“risk1”“risk2”等的字段

function validate_form ( ) {
    valid = true; 

    document.calc.risk1.value = document.getElementById('data_1_severity').value*document.getElementById('data_1‌_likelihood').value;
    document.calc.risk2.value = document.getElementById('data_2_severity').value*document.getElementById('data_2‌_likelihood').value; 

    return valid;
}

有人可以帮我吗？只是希望风险评分根据价值或细胞背景改变颜色来改变颜色 - 不是真的很麻烦。这将显示风险是否为：

绿色 - 低风险
橙色 - 中等风险
红色 - 高风险。

Answer 1

这样的事情：

var changeColor = function(obj){

  if(obj.value < 6){
    obj.style.backgroundColor = 'green';
  } else if(obj.value >= 6 && obj.value <= 9){
    obj.style.backgroundColor = 'orange';
  } else if(obj.value > 9){
    obj.style.backgroundColor = 'red';
  }

};

然后在validate_form（）函数中：

changeColor(document.calc.risk1);

更好的方法是为每种颜色创建CSS类，并执行以下操作：

obj.className = 'green';

而不是

obj.style.backgroundColor = 'green';

Answer 2

你可以使用jQuery

来做到这一点

你的CSS应该是这样的：

.low-risk{
    background: green;
}

.medium-risk{
    background: orange;
}

.high-risk{
    background: red;
}

这是一个用于更改颜色的javascript函数：

<script>
    function changeInputColor(input, value){
        $(input).removeClass();
        if (value < 6){
            $(input).addClass('low-risk');
        }
        else if(value >= 6 && value <= 9){
            $(input).addClass('medium-risk');
        }
        else{
            $(input).addClass('high-risk');
        }
    }
</script>

根据输入字段的值更改文本颜色或背景

2 个答案: