Question

我有一个输入字段，它将填充计算，但只在加载时读取。我想知道如何在填充字段后更改背景颜色，文本颜色等。如果输入小于0，我希望该字段为红色;如果正确输入为0或更大，我希望该字段为绿色。该字段仅在整个过程中读取。

基本上，我需要根据字段的输入更改只读背景颜色，而不是在使用css输入[readonly]加载页面时更改。

Answer 1

有很多方法，但是如果你使用jQuery，有一个简单的方法：$（selector）.css（propertyName，value）。您可能希望将其放在onChange事件处理程序中。试一试，让我们知道你提出了什么，以及你是否有更具体的问题。尝试浏览jQuery文档。

http://api.jquery.com/css/

该链接有一个非常接近你想要的例子。

Answer 2

您需要使用输入的onchange事件来更改输出的background-color CSS属性和value属性。就个人而言，我会在CSS中定义具有某些背景颜色的类，然后更改输出的className属性以将类属性化为输出。

var output /*Our output*/, inputs /*Our inputs*/;
document.addEventListener("DOMContentLoaded", function() { //When the document has loaded...
    //Set the variables.
});

function update() {
    var input1 = parseFloat(inputs[0].value), input2 = parseFloat(inputs[1].value);
    if (isNaN(input1) || isNaN(input2)) {
        //Make the background-color accordingly
    } else {
        output.value = input1+input2;
        if (input1+input2 > 0) {
            //Make the background-color accordingly
        } else {
            //Make the background-color accordingly
        }
    }
}

这是小提琴：http://jsfiddle.net/NobleMushtak/HTP5d/

根据元素的输入更改只读背景颜色

2 个答案: