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

【问题标题】：Change the color of an html 5 output object based on value根据值更改 html 5 输出对象的颜色
【发布时间】：2012-12-12 22:59:59
【问题描述】：

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

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

/表格

【问题讨论】：

你需要先发布你的JS代码。
你可以用JS给元素设置一个类，判断值是正数还是负数。通过 CSS 设置这些类的样式。

标签： javascript css html

【解决方案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/

【讨论】：