在 JavaScript 中更改元素的背景颜色答案

【问题标题】：Change element's background color in JavaScript在 JavaScript 中更改元素的背景颜色
【发布时间】：2017-01-30 06:16:54
【问题描述】：

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

这是代码：

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

&lt;div id="box" onclick="color()"&gt;Click me&lt;/div&gt;

【问题讨论】：

这里没有问题。
@cord 您的问题似乎不完整。 :(
是的，我知道了，
我正在尝试创建一个函数来更改我的元素（box = id），以及当我通过 trought id 的名称和颜色时的颜色
如果 id 和 idColor 在开始时立即被覆盖，那么它们有什么意义？当你在onclick 中调用它时，你没有将参数传递给color 应该是这样的：onclick="color(/*some value for id here*/, /*some value for idColor here*/)"

标签： javascript css colors

【解决方案1】：

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

方法一

使用id 和color 调用color 函数。

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

&lt;div id="box" onclick="color('box','red')"&gt;Click me&lt;/div&gt;

方法二

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

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

&lt;div id="box" onclick="color(event,'red')"&gt;Click me&lt;/div&gt;

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

【讨论】：

谢谢这个作品，我会尽力让我的问题更清楚。
所以如果我想传递宽度和高度，我可以这样做吗？函数颜色（id，idColor，宽度，高度）{ px = "px";宽度=“”+像素；高度=“”+像素；控制台.log(id); document.getElementById(id).style.background = idColor; document.getElementById(id).width = width; document.getElementById(id).width = height; }

【解决方案2】：

你可以这样做。给Div一些高度和宽度以点击它

<div id ="mybox" onclick="changeColor('mybox','blue')" style="height:100px; width:100px"></div>

function changeColor(id,idcolor){
            document.getElementById(id).style.backgroundColor =idcolor;
        }

我希望这是你的答案。

【讨论】：

好的，很酷，谢谢，确实有效，所以如果我想传递高度和宽度，