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

JavaScript change the color of current element by clck

本文关键字：元素 颜色 通过 clck JavaScript      更新时间：2023-09-26

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

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

例如，我这里有两种背景颜色（黄色、浅蓝色），如果我单击"旧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;
}

你可以帮我吗？提前致谢

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

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/

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

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

http://jsfiddle.net/4uosvc75/

相关文章：