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>

Answer 2

$(document).ready(function(){
$('#clickMe').click(function(){
  $('.defaultColor').css({background:"green"});
})
})

.defaultColor{
width:100px;
height:100px;
background:yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="defaultColor">color Change</div>
<button id="clickMe">click me</button>

单击时如何使每个元素改变颜色？

2 个答案: