Javascript 根据输入字段的值更改文本颜色或背景
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13727735/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Changing text colour or background depending on value of input field
提问by php_beginner
Possible Duplicate:
How do I change the background color with Javascript?
可能的重复：
如何使用 Javascript 更改背景颜色？
I have this javascript function which works fine but I wanted to add to it.
我有这个 javascript 函数，它工作正常，但我想添加它。
The Risk is calculated by multiplying the severity by the likelihood. The calculation is done by the function below validate_form()
风险是通过将严重性乘以可能性来计算的。计算由validate_form()下面的函数完成
The colour according to values is:
根据值的颜色是：
- Green - less than 6 the input field changed colour to green
- Orange - between 6 - 9
- Red - if more than 9
- 绿色 - 小于 6 输入字段将颜色更改为绿色
- 橙色 - 6 - 9
- 红色 - 如果超过 9
The risk value writes to and input field named "risk1" "risk2" etc.
风险值写入并输入名为“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;
}
Could someone help me with this? Just want either the risk score to change color depending on value or the background of the cell to change colour - not really bothered. This will show then if the risk is:
有人可以帮我解决这个问题吗？只希望风险分数根据值改变颜色或单元格的背景改变颜色 - 并不真正困扰。这将显示风险是否为：
- Green - Low Risk
- Orange - medium risk
- Red - high risk.
- 绿色 - 低风险
- 橙色 - 中等风险
- 红色 - 高风险。
采纳答案by Freddie
Something like this:
像这样的东西：
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';
}
};
Then inside your validate_form() function:
然后在你的 validate_form() 函数中：
changeColor(document.calc.risk1);
Even better would be to create CSS classes for each color and do something like:
更好的是为每种颜色创建 CSS 类并执行以下操作：
obj.className = 'green';
instead of
代替
obj.style.backgroundColor = 'green';
回答by Johny
you can do this using jQuery
你可以使用 jQuery 做到这一点
your CSS should look like this:
你的 CSS 应该是这样的：
.low-risk{
background: green;
}
.medium-risk{
background: orange;
}
.high-risk{
background: red;
}
and here is a javascript function for changing the color:
这是一个用于更改颜色的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>
