Question

我正在尝试使用函数getElementById()。

我有几个ID，我想逐个改变它的风格。我有一个名为numberOfTimes的变量，每次增加1。

ID的名称是1,2,3,4等，最多8个。

我是否可以通过某种方式在函数中使用变量名称 - 如果没有，您应该如何解决？

var numberOfTimes = 1;
document.getElementById(1).style.backgroundColor = "green";

Answer 1

让我们假装你的IDs看起来像idx（x代表数字）。你可以这样做：

var numberOfTimes = 8;

for (var i = 1; i <= numberOfTimes; ++i) {
    document.getElementById('id' + i).style.backgroundColor = "green";
}

Answer 2

解决方案，如果你真的特定的是逐个改变元素的颜色。然后你可以使用for循环。

第二

document.getElementById(1)

您可以直接使用整数值，但最好使用带有某些文本的id。只需在for循环中使用这样的

for(var i=1;i<=8;i++){
document.getElementById("div_"+i).style.backgroundColor = "green";
}

Answer 3

仅限数字的ID不是一个好习惯，我希望这个问题是为了学习。

for(var i = 1; i < 9; i++){
    document.getElementById(i).style['background'] = 'green';
}

div {
  width:100%;
  height:20px;
  margin-bottom:10px;
}

<div id="1"></div>
<div id="2"></div>
<div id="3"></div>
<div id="4"></div>
<div id="5"></div>
<div id="6"></div>
<div id="7"></div>
<div id="8"></div>

Answer 4

正如其他答案和评论中所述，强烈建议不要仅使用数字作为ID，也可以在一个唯一的类名称上选择这些div，这将获得它们的数组，并且只是循环遍历数组就像在this fiddle中一样。

然而，这是代码JS Fiddle

var id = 1;

changeBG();

function changeBG() {
  document.getElementById('el-' + id).style.backgroundColor = "green";
  id++;
  var t = setTimeout(changeBG, 500);
}

div {
  width: 100%;
  height: 50px;
  margin-bottom: 5px;
  display: inline-block;
}

<div id="el-1"></div>
<div id="el-2"></div>
<div id="el-3"></div>
<div id="el-4"></div>
<div id="el-5"></div>
<div id="el-6"></div>
<div id="el-7"></div>
<div id="el-8"></div>

通过id获取元素 - 使用变量

4 个答案: