html - JavaScript change the color of current element by clck - Stack Overflow

admin管理员组

文章数量:1395027

i have a question about changing the color of only Current element. So i want to change the background color of the current element by every click.

My problem is, i can not reset the background color of previous element.

For an example i have here two background color(yellow, lightblue), if i click on "old div" and "new div", than the background color of two divs changes to green. But only one div should be set to green.

So by every click must change only the background color of current element.

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;
}

Can you help me? Thanks in advance

i have a question about changing the color of only Current element. So i want to change the background color of the current element by every click.

My problem is, i can not reset the background color of previous element.

For an example i have here two background color(yellow, lightblue), if i click on "old div" and "new div", than the background color of two divs changes to green. But only one div should be set to green.

So by every click must change only the background color of current element.

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;
}

Can you help me? Thanks in advance

• javascript
• html
• css

Share Improve this question Follow edited Nov 20, 2014 at 17:11 GoBusto 4,78866 gold badges3131 silver badges4646 bronze badges asked Nov 20, 2014 at 16:42 aldimeola1122aldimeola1122 81855 gold badges1414 silver badges2424 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

If you worried about performance, you can just save previous and reset it's background color to normal.

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/v6d6veyv/

Reset the background colour of all other divs when you click one.

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

http://jsfiddle/4uosvc75/

本文标签： htmlJavaScript change the color of current element by clckStack Overflow