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/