JS通过变量调用元素ID失败求助：批量设置div样式方案

你的代码报错核心原因有两个：

1. 循环变量i是数字类型，不存在id属性，i.id或[i].id都会返回undefined，导致你拼接的选择器是NewDivForGame_undefined，根本找不到对应元素。
2. 你给每个div设置的ID（如Key、string_1、1a1）和循环中试图获取的ID（NewDivForGame_0/1/2...）完全不匹配。

根据你的需求，提供两种可行方案：

方案一：保留现有自定义ID #

如果要保留已设置的Key、string_1等ID，先把所有ID存入数组，再循环遍历设置样式：

// 把所有div的ID按顺序存入数组（补全剩下9个ID）
const divIds = ['Key', 'string_1', '1a1', 'id_4', 'id_5', 'id_6', 'id_7', 'id_8', 'id_9', 'id_10', 'id_11', 'id_12'];

for (let i = 0; i < divIds.length; i++) {
  const targetDiv = document.getElementById(divIds[i]);
  // 先判断元素是否存在，避免找不到元素时报错
  if (targetDiv) {
    targetDiv.style.width = '35px';
    targetDiv.style.height = '35px';
    targetDiv.style.backgroundColor = 'blue';
    console.log('Create size div run #' + i);
  }
}

方案二：统一ID命名规则（更简洁） #

如果可以修改ID为和变量名对应的格式（如NewDivForGame_0到NewDivForGame_12），先修改第二步的ID设置：

NewDivForGame_0.id = 'NewDivForGame_0';
NewDivForGame_1.id = 'NewDivForGame_1';
NewDivForGame_2.id = 'NewDivForGame_2';
// 以此类推到NewDivForGame_12

再修改循环代码：

for (let i = 0; i <= 12; i++) {
  const targetDiv = document.getElementById(`NewDivForGame_${i}`); // 用模板字符串拼接更简洁
  if (targetDiv) {
    targetDiv.style.width = '35px';
    targetDiv.style.height = '35px';
    targetDiv.style.backgroundColor = 'blue';
    console.log('Create size div run #' + i);
  }
}

进阶优化：创建div时直接批量处理 #

更高效的写法是用循环一次性完成div的创建、ID设置、样式设置和添加到文档，避免重复代码：

// 自定义ID数组（按需修改）
const divIds = ['Key', 'string_1', '1a1', 'id_4', 'id_5', 'id_6', 'id_7', 'id_8', 'id_9', 'id_10', 'id_11', 'id_12'];
// 选择要添加div的容器（这里以body为例，可替换为其他元素）
const container = document.body;

for (let i = 0; i < divIds.length; i++) {
  const newDiv = document.createElement('div');
  newDiv.id = divIds[i];
  // 直接设置样式
  newDiv.style.width = '35px';
  newDiv.style.height = '35px';
  newDiv.style.backgroundColor = 'blue';
  // 添加到文档
  container.appendChild(newDiv);
  console.log('Create size div run #' + i);
}

内容的提问来源于stack exchange，提问作者KimL