Change read only background color based on the input of the element

This question already has an answer here:

Change an HTML5 input's placeholder color with CSS 31 answers

---

There's a lot of ways, but if you're using jQuery, there's a simple way to do so: $(selector).css(propertyName, value). You'll probably want to put that in an onChange event handler. Give it a try and let us know what you come up with and whether or not you have more specific questions. Try browsing the jQuery docs.

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

That link has an example that's pretty darn close to what you want.

---

You need to use the onchange event of the inputs to change the background-color CSS property and value attribute of the output. Personally, I would define classes with certain background colors in CSS and then change the className attribute of the output to attribute a class to the output.

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
        }
    }
}

Here's the fiddle: http://jsfiddle.net/NobleMushtak/HTP5d/

链接地址: http://www.djcxy.com/p/12164.html

上一篇: 我如何将占位符文本颜色更改为白色

下一篇: 根据元素的输入更改只读背景颜色