JavaScript通过修改当前元素的颜色

Question

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

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

对于一个例子，我这​​里有两个背景颜色（黄色，lightblue），如果我的“老格”和“新格”点击，比两个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/

Answer 2

重置所有其他的div的背景颜色，当你点击一个。

var divs = document.getElementsByTagName("div"); 
for(var i = 0; i < divs.length; i++){ 
    divs[i].style.backgroundColor = ''; 
} 

http://jsfiddle.net/4uosvc75/