更改文本顏色或背景

可能重複：
How do I change the background color with Javascript?更改文本顏色或背景

我有工作正常該javascript函數，但我想給它添加。

風險通過將嚴重性乘以可能性來計算。小於6的輸入域的顏色變成綠色

橙色 - - 9 - 6之間

綠色：計算由下面validate_form函數（）

根據值的顏色是做
紅色 - 如果超過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; 
}

有人能幫助我嗎？只需要風險分數根據價值或單元格的背景改變顏色來改變顏色 - 而不是真正困擾。這將顯示，然後如果風險是：

綠色 - 低風險
橙色 - 中等風險
紅 - 高風險。

來源

2012-12-05 php_beginner

我假設你打算把它作爲一個JavaScript問題而不是PHP。 –

您可以使用條件語句（'if'），並對這些值進行比較。然後你可以在你的css中創建3個類，並根據條件將它們應用到元素中。 – knownasilya

喜歡的東西這個：

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-05 16:41:27 Freddie

工作完美 - 謝謝sooooo多！ –

你可以使用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-05 16:38:40 Johny

更改文本顏色或背景

回答

相關問題