Question

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

表格oninput =“o.value = a.valueAsNumber + b.valueAsNumber”
输入名称=“a”id =“a”type =“number”step =“any”+
输入名称=“b”id =“b”type =“number”step =“any”=
输出名称=“o”表示=“a b”＆gt;

/形式

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/

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

1 个答案: