基于值更改html 5输出对象的颜色

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

形式oninput = “o.value = a.valueAsNumber + b.valueAsNumber”
输入名称= “一” ID = “A” 类型= “数字” 步骤= “任何” +
输入名称=” b”的ID = “b” 类型= “数字” 步骤= “任何”=
输出名称= “○” 为= “AB”>

/形式

来源

2012-12-12 user1899317

您需要先发布您的JS代码。 – SomeShinyObject

您可以使用JS为元素设置一个类，以确定该值是正值还是负值。通过CSS设置这些类的样式。 – feeela

不是一个大的只是给风扇当用户没有显示他们先尝试过的东西时会回答，但实际上这有点好玩，我以前从未见过这种类型的表单。

就像@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-12 23:56:28 Godwin

基于值更改html 5输出对象的颜色

回答

相关问题