如何让每个元素在点击时改变颜色？

Question

当我滚动翻页时，我写了这段代码将每个正方形更改为更大的尺寸。如何让他们在点击时改变颜色而不是尺寸，一个红色，一个蓝色，一个绿色， ？我要，使用元素上的一个数据属性来将要更改的颜色存储到 。

这是我的JS代码。

> for(var i =0; i<3; i++) { 
>  //new div 
>  var newDiv = document.createElement("div"); 
> 
>  //add click listener 
>  newDiv.addEventListener('cick', clickResponse); 
> 
>  //add the div to the root of the body 
>  document.body.appendChild(newDiv); } 
> 
> //event _handler_ function click (event) { 
> 
> event.target.style.width= "200px"; event.target.style.height= 
> "200px"; } function mouseOut(event) { 
> 
> event.target.style.width= "100px"; event.target.style.height= 
> "100px"; } function onMouseClick(event) { event.target.remove(); 
> 
> } 

Answer 1

希望这会帮助你。

由于每个div都需要具有唯一的颜色，因此它们都是在循环之外单独创建的。然后，它们被添加到一个数组中，该数组被迭代以将它们添加到DOM，附加事件监听器以及应用各种CSS样式。在click处理程序中，我们获取div的“data-color”属性的值，并使用它来更新div的背景色样式。

<script> 
    var div1 = document.createElement("div"); 
    div1.setAttribute("data-color", "red"); 

    var div2 = document.createElement("div"); 
    div2.setAttribute("data-color", "green"); 

    var div3 = document.createElement("div"); 
    div3.setAttribute("data-color", "blue"); 

    var divs = [div1, div2, div3]; 

    for (var i = 0; i < divs.length; i++) { 
    divs[i].style.width = "50px"; 
    divs[i].style.height = "50px"; 
    divs[i].style.margin = "5px"; 
    divs[i].style.backgroundColor = "#CCC"; 
    divs[i].addEventListener('click', clickResponse); 
    document.body.appendChild(divs[i]); 
    } 

    function clickResponse(event) { 
    var bgColor = event.target.getAttribute("data-color"); 
    event.target.style.backgroundColor = bgColor; 
    } 
</script>