Question

我有这段代码：

var max1box = document.getElementById('length'),
    max2box = document.getElementById('width'),
    max1 = 100,
    min1 = 20,
    max2 = 400,
    min2 = 10;

 max1box.addEventListener('change',validateValues,false);
 max2box.addEventListener('change',validateValues,false);


function validateValues() {

    if (this == max1box &&
        +this.value > max1 &&
        +this.value > max2box.value)
    {
       max1box = max2box;
       max2box = this;  

    }

    if (max1box.value > max1) {
        max1box.value = max1;
    }
    if (max1box.value < min1) {
        max1box.value = min1;
    }        

    if (max2box.value > max2) {
        max2box.value = max2;
    }
    if (max2box.value < min2) {
        max2box.value = min2;
    }
   }

http://jsfiddle.net/LpmnY/

在代码中有一个函数，当在另一个框中输入更高的值时，该函数会降低一个框的值。我想要的是让用户以一种不错的方式收到这种减少的警报，因为他们可能不会注意到它。

因此，当减少值发生时，可以让值减小的框获得不同的背景颜色 - 然后在突出显示框时恢复正常？

Answer 1

您可以使用以下方法更改背景颜色：

element.style.backgroundColor = "#ff0000";

element是包含DOM元素的变量（在您的情况下，max1box或max2box）。

因此，您只需将其添加到函数中以更改相应输入的颜色，然后使用具有不同颜色的类似行再次更改它。

Answer 2

max2box.style.backgroundColor = 'yellow';

Answer 3

我编辑了你的小提琴http://jsfiddle.net/LpmnY/1/（好吧，它不是红色的） - 当某些东西设置为分钟时，它会改变它的背景颜色

var max1box = document.getElementById('length'),
    max2box = document.getElementById('width'),
    max1 = 100,
    min1 = 20,
    max2 = 400,
    min2 = 10;

 max1box.addEventListener('change',validateValues,false);
 max2box.addEventListener('change',validateValues,false);


function validateValues() {

    if (this == max1box &&
        +this.value > max1 &&
        +this.value > max2box.value)
    {
       max1box = max2box;
       max2box = this;  

    }

    if (max1box.value > max1) {
        max1box.value = max1;

    }
    if (max1box.value < min1) {
        max1box.value = min1;
        max1box.style.backgroundColor= '#E5E5E5';
    }        

    if (max2box.value > max2) {
        max2box.value = max2;
    }
    if (max2box.value < min2) {
        max2box.value = min2;
        max2box.style.backgroundColor= '#E5E5E5';
    }
   }

Answer 4

如何使用style属性添加彩色边框？

function validateValues() {

    if (this == max1box &&
        +this.value > max1 &&
        +this.value > max2box.value)
    {
       max1box = max2box;
       max2box = this;  

    }

    if (max1box.value > max1) {
        max1box.value = max1;
        max1box.style.border = '2px solid red';

    }else if (max1box.value < min1) {
        max1box.value = min1;
        max1box.style.border = '2px solid blue';
    }   
    else max1box.style.border = 'auto';    

    if (max2box.value > max2) {
        max2box.value = max2;
        max2box.style.border = '2px solid green';

    }else if (max2box.value < min2) {
        max2box.value = min2;
        max2box.style.border = '2px solid yellow';

    }else max2box.style.border = 'auto';

   }

Answer 5

$("#max1box").change(function() {
    $('max1box').css("backgroundColor","#F9F");
});

当值发生变化时文本框上的新背景颜色？

5 个答案: