Question

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

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

例如，我有两种背景颜色（黄色，浅蓝色），如果我点击“旧div”和“新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

单击一个div时重置所有其他div的背景颜色。

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

http://jsfiddle.net/4uosvc75/

Answer 2

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

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/

JavaScript通过单击更改当前元素的颜色

2 个答案: