Javascript 如何根据输入值动态更改css样式？_Javascript_Jquery_Html_Css_Dynamic

Javascript 如何根据输入值动态更改css样式？

javascript jquery html css dynamic

Javascript 如何根据输入值动态更改css样式？,javascript,jquery,html,css,dynamic,Javascript,Jquery,Html,Css,Dynamic,我们有一些用户输入的数据和计算后的结果。现在我想根据用户在计算后得到的值来更改css样式我的html： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></

我们有一些用户输入的数据和计算后的结果。现在我想根据用户在计算后得到的值来更改css样式

我的html：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    <style type="text/css">
    .not_good { solid red; background:#eee;}
    .good { solid green; background:#C0E9F6;}
    </style>
    <script type="text/javascript">

    var BuckwheatCa = 4

    function convcase(word) {
        document.convert.Ca.value = BuckwheatCa * document.convert.Buckwheat.value
    };
    </script>
</head>
<body>
    <FORM ACTION="#" NAME="convert">
        Buckwheat, gramm
        <INPUT TYPE=TEXT NAME="Buckwheat"
        ONKEYUP="convcase(document.convert.Buckwheat.value)" >
        <table>
            <tr>
                <td>Ca</td> <td><INPUT TYPE=TEXT NAME="Ca" DISABLED></td>
            </tr>
        </table>
    </FORM>
</body>
</html>


.不好{纯红；背景：#eee；}
.good{纯绿色；背景：#C0E9F6；}
var BuckwheatCa=4
函数大小写（word）{
document.convert.Ca.value=BuckwheatCa*document.convert.Buckwheat.value
};
荞麦
Ca

那么，有没有一种方法可以使用if…else语句创建函数，该语句使用document.convert.Ca.value变量值，例如，如果变量小于10，它将更改中文本的css样式？

您可以使用普通javascript在代码中使用它

if(value<10){
       document.getElementById("sample").style.color="blue";
}

if（值函数convcase（word）{
document.convert.Ca.value=BuckwheatCa*document.convert.Buckwheat.value
//现在添加css比较
如果（document.convert.Ca.value<10）{
//使用jQuery访问“td”并在其上设置css
$（'td'）.css（'font-family'，'arial'）；
}否则{
//随便你
}
};
你想更改哪种样式的
？@Manwal他说他想根据Ca
中的输入更改
的样式。我想更改Ca和@Manwal中的文本颜色这一行缺少分号：document.convert.Ca.value=BuckwheatCa*document.convert.Buckwheat.value你应该d提到他需要给这些元素ID。
if(value<10){
       $("sample").css("color","blue");
}

<td id='sample'>Ca</td> <td><INPUT TYPE=TEXT NAME="Ca" DISABLED></td>

function convcase(word) {
document.convert.Ca.value = BuckwheatCa * document.convert.Buckwheat.value
// now add css comparison
if(document.convert.Ca.value < 10){
    // using jQuery to access the 'td' and set the css on it
    $('td').css('font-family', 'arial');
} else {
    // whatever you want
}
};