javascript - 在 JavaScript 中更改元素的背景颜色

Question

我正在尝试创建一个函数，该函数在使用 ID 和颜色名称调用时会更改我的元素 (id="box") 的颜色。我该怎么做？

这是代码:

function color(id, idColor) {
  id = '';
  idColor = '';
  object = document.getElementById(id).style.background = idColor;
}

<div id="box" onclick="color()">Click me</div>

Answer 1

这个问题相当不完整。但是，如果我理解您正在尝试正确执行的操作，您希望通过将 id 和 color 传递给函数来更改元素的颜色。你可以这样做。

方法一

使用id 和color 调用color 函数。

function color(id, idColor) {
  document.getElementById(id).style.background = idColor;
}

<div id="box" onclick="color('box','red')">Click me</div>

方法二

使用 event 对象，而不是每次都显式传递 id。这是一种稍微好一点的方法，因为您不必担心 div 上的属性(例如本例中的 id)。 event 对象提供了一个 target 属性，它允许我们直接获取 div 节点(无需执行 document.getElementById(id ))。

function color(event,idColor) {
   event.target.style.background = idColor;
}

<div id="box" onclick="color(event,'red')">Click me</div>

仅通过传递颜色来调用颜色。