Question

我在这里有一个例子，我想在点击时更改div的颜色。我是否必须有两个不同的功能，每个div一个？如果我想要应用于div的函数非常复杂怎么办？如果我对div感到懊恼怎么办？我可以制作一个通用功能，可以应用于每个div吗？通过这个我并不是说例如document.getElementsByClassName(" ... ")，我想例如分别改变颜色。

要明确的是，如何将相同的功能应用于不同的对象？像document.getElementThatIsClicked(" ... " )之类的东西谢谢你。

＆＃13;

function changeColor1() {
  document.getElementById("div1").style.backgroundColor = "#21a9c9";
}
function changeColor2() {
  document.getElementById("div2").style.backgroundColor = "#21a9c9";  
}

＆＃13;

<div id="div1" onClick="changeColor1()" style="position:absolute; top:10px; left: 10px; width:200px; height: 200px; background-color:#000000;"></div>
                      
<div id="div2" onClick="changeColor2()" style="position:absolute; top: 10px; left: 220px; width:200px; height: 200px; background-color:#000000;"></div>

＆＃13;

Answer 1

您可以创建一个接受您想要更改颜色的元素的函数，并使该函数更改该元素的背景颜色

＆＃13;

 function changeColor(elem) {
   elem.style.backgroundColor = "#21a9c9"
 }

＆＃13;

<div id="div1" onClick="changeColor(this)" style="position:absolute; top:10px; left: 10px; width:200px; height: 200px; background-color:#000000;"></div>

<div id="div2" onClick="changeColor(this)" style="position:absolute; top: 10px; left: 220px; width:200px; height: 200px; background-color:#000000;"></div>

＆＃13;

Answer 2

从https://stackoverflow.com/a/32828729/227299复制，但是：

使用内联HTML属性避免设置处理程序，有利于从JavaScript本身不引人注意地设置处理程序。请参阅onclick="" vs event handler
避免从HTML属性设置CSS属性。请参阅What's so bad about in-line CSS?

function changeColor(elem) {
  elem.style.backgroundColor = "#21a9c9"
}


var divs = document.querySelectorAll('div');
for (var i = 0; i < divs.length; i++) {
  divs[i].addEventListener('click', function(e) {
    changeColor(this);
  });
}

#div1,#div2 {
  display: inline-block;
  width: 200px; 
  height: 200px; 
  background-color:#000000;
}

<div id="div1"></div>

<div id="div2"></div>

Javascript - 一般功能的多用途

2 个答案: