3

可能重复：
如何使用 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;
}

有人可以帮我解决这个问题吗？只是希望风险评分根据值改变颜色或单元格的背景改变颜色 - 并没有真正打扰。这将显示风险是否为：

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

2 回答 2

2

像这样的东西：

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';
于 2012-12-05T16:41:27.150 回答
1

你可以使用 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>
于 2012-12-05T16:38:40.553 回答