1

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

表单 oninput="o.value = a.valueAsNumber + b.valueAsNumber"
输入名称="a" id="a" type="number" step="any" +
输入名称="b" id="b" 类型="number" step="any" =
输出名称="o" for="a b">

/形式

4

1 回答 1

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/

于 2012-12-12T23:56:28.587 回答