Acho que o que você quer é manipular a propriedade `document.form.cor3.className`: <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-js --> function cor() { var cor1 = eval(document.form.cor1.value) || 0; var cor2 = eval(document.form.cor2.value) || 0; var comp = eval(document.form.comparar.value) || 0; var cor3 = cor1 + cor2; document.form.cor3.value = cor3; document.form.cor3.className = cor3 < comp ? 'vermelho' : 'verde'; } <!-- language: lang-css --> .vermelho { background-color: red; } .verde { background-color: green; } <!-- language: lang-html --> <form name="form" onmouseover="cor()"> <input name="comparar" width="50%" /><br /><br /><br /> <input name="cor1" width="50%" /><br /> <input name="cor2" width="50%" /><br /><br /><br /> <input name="cor3" width="50%" /><br /> </form> <!-- end snippet -->