Question

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

这是代码：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

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

方法1

使用color和id调用color功能。

＆＃13;

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

＆＃13;

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

＆＃13;

方法2

使用event对象，而不是每次都明确传递id。这是一种稍微好一点的方法，因为您不必担心div上的属性（在这种情况下如id）。 event对象提供target属性，允许我们直接获取div节点（无需document.getElementById(id)）。

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 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;
        }

我希望这是你的答案。

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

2 个答案: