javascript - 根据值更改 html 5 输出对象的颜色

Question

如果计算结果为负，我想将其颜色更改为红色。我尝试了一个样式表，并将输出放入 javascript 调用中，但它似乎没有用。有没有办法将下面示例代码中 html 5 输出“o”的颜色更改为红色(如果为负)和绿色(如果为正)？

form oninput="o.value = a.valueAsNumber + b.valueAsNumber"
输入 name="a"id="a"type="number"step="any"+
输入 name="b"id="b"type="number"step="any"=
输出 name="o"for="a b">

/表格

Answer 1

当用户没有展示他们首先尝试过的内容时，我不太喜欢只给出答案，但这实际上有点有趣，我以前从未见过这种类型的表格。

正如@feeela 所说，您可以使用 JS 来监视输入更改并相应地验证输出字段。我正在使用 jQuery 这样做:

$(document).ready(function() {
    $('input').change(
        function()
        {
            $('output').removeAttr('class');
            var sum = parseInt($('output').first().html());
            if (isNaN(sum))
            {
                $('output').addClass('error');
            }
            else if (sum < 0)
            {
                $('output').addClass('negative');
            }
            else if (sum > 0)
            {
                $('output').addClass('positive');
            }
        }
    );
});

然后您可以使用样式表根据其类别为输出字段指定颜色。 的您可以在此处查看演示:http://jsfiddle.net/S7cVP/