JavaScript 通过点击改变当前元素的颜色

Question

我有一个关于仅更改当前元素的颜色的问题。所以我想通过每次点击更改当前元素的背景颜色。

我的问题是，我无法重置前一个元素的背景颜色。

例如，我这里有两种背景颜色(黄色、浅蓝色)，如果我单击“old div”和“new div”，那么两个 div 的背景颜色会变为绿色。但是只有一个 div 应该设置为绿色。

所以每次点击都只能改变当前元素的背景颜色。

JavaScript

var divTag = document.getElementsByTagName("div");

for (var i = 0; i < divTag.length; i++) {
    if (divTag[i].tagName == "DIV" || divTag[i].tagName == "div") {
         if (divTag[i].addEventListener) {
            divTag[i].addEventListener('click', callback,false);
         } 
         else if (divTag[i].attachEvent) {
            divTag[i].attachEvent('on' + 'click',callback);
         }
    }
}

function callback(e) {
    e = e || window.event;
    var target = e.target || e.srcElement;
    target.style.backgroundColor = "green";
    e.stopPropagation();
}

HTML

<div id="old">
    <input style="margin: 10px;" type="textbox" />
    <div id="new"></div>
</div>

CSS

#old {
    width:200px;
    height:200px;
    background-color:yellow;
}
#new{
    width:20px;
    height:20px;
    background-color:lightblue;
}

你能帮帮我吗？提前致谢

Answer 1

如果您担心性能，您可以保存以前的并将其背景颜色重置为正常。

var prevDiv = null;

function callback(e) {
    e = e || window.event;
    var target = e.target || e.srcElement;
    if(prevDiv) {
        prevDiv.style.backgroundColor = '';        
    }
    target.style.backgroundColor = 'green';
    prevDiv = target;
    e.stopPropagation();
}

http://jsfiddle.net/v6d6veyv/