0

當我滾動翻頁時,我寫了這段代碼將每個正方形更改爲更大的尺寸。如何讓他們在點擊時改變顏色而不是尺寸,一個紅色,一個藍色,一個綠色, ?我要,使用元素上的一個數據屬性來將要更改的顏色存儲到 。如何讓每個元素在點擊時改變顏色?

這是我的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(); 
> 
> } 

回答

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>