Question

我们有一些用户输入的数据和计算后的结果。现在我希望取决于用户在计算后获得的值来改变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>

有没有办法使用if> else语句创建一个函数 document.convert.Ca.value 变量值将改变＆lt; td中文本的CSS样式＆GT;如果变量是＆lt;例如10？

Answer 1

你可以在你的代码中使用普通的javascript来实现它

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

或者您可以使用jQuery：

if(value<10){
       $("sample").css("color","blue");
}

选择适合您的任何内容。

当然，您必须拥有@Barmar建议的ID：

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

上面的代码现在单独更改Ca的样式，因为该标记存在id。

您可以对任何css属性进行更改：http://www.blooberry.com/indexdot/css/propindex/all.htm

Answer 2

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
}
};

如何根据INPUT值动态更改css样式？

2 个答案: