设置<li>元素字体大小时触发Uncaught TypeError错误求助

错误根源 #

你遇到的Uncaught TypeError: Cannot set properties of undefined (setting 'fontSize')是因为：

• document.getElementsByClassName()返回的是HTMLCollection（类数组对象），用for...in循环会遍历该对象的所有可枚举属性，包括length、item等非DOM元素属性。当循环到这些属性时，taskList[task]是undefined，自然无法设置style.fontSize，从而抛出错误。
• 代码中let i; i++;属于无效代码，i未初始化就自增会得到NaN，不过这不是当前报错的直接原因。

修复方案 #

以下几种写法都可以解决问题：

方案1：使用for...of循环（ES6+） #

HTMLCollection是可迭代对象，for...of会直接遍历其中的DOM元素：

<ul id="task-list">
  <li class="task">Gorev1</li>
  <li class="task">Gorev2</li>
  <li class="task">Gorev3</li>
  <li class="task">Gorev4</li>
  <li class="task">Gorev5</li>
</ul>

<script>
  let taskList = document.getElementsByClassName("task");

  for (let task of taskList) {
    task.style.fontSize = "50px";
    task.style.color = "red";
  }
</script>

方案2：传统for循环（兼容所有浏览器） #

基于HTMLCollection的length属性遍历索引：

<ul id="task-list">
  <li class="task">Gorev1</li>
  <li class="task">Gorev2</li>
  <li class="task">Gorev3</li>
  <li class="task">Gorev4</li>
  <li class="task">Gorev5</li>
</ul>

<script>
  let taskList = document.getElementsByClassName("task");

  for (let i = 0; i < taskList.length; i++) {
    taskList[i].style.fontSize = "50px";
    taskList[i].style.color = "red";
  }
</script>

方案3：转为数组后用forEach遍历 #

用Array.from()将HTMLCollection转为数组，再使用数组方法遍历：

<ul id="task-list">
  <li class="task">Gorev1</li>
  <li class="task">Gorev2</li>
  <li class="task">Gorev3</li>
  <li class="task">Gorev4</li>
  <li class="task">Gorev5</li>
</ul>

<script>
  let taskList = Array.from(document.getElementsByClassName("task"));

  taskList.forEach(task => {
    task.style.fontSize = "50px";
    task.style.color = "red";
  });
</script>

内容的提问来源于stack exchange，提问作者Hasan Aydeğer