为何使用setAttribute为li添加class后fontSize样式未生效？

你遇到的问题根源很明确：你是在创建新<li>元素之前，就用document.querySelectorAll(".list-items")获取了页面上的列表项，这个方法返回的是静态集合，只会包含调用时页面已存在的5个初始<li>。后续动态添加的新<li>不会自动加入这个集合，所以自然不会被执行style.fontSize = "2rem"的设置。

下面给你几种可行的解决方式：

方式一：直接给新元素设置样式 #

在创建并添加新<li>后，单独给它设置字体大小：

const title = document.querySelector("#main-heading");
title.style.color = "red";

const listItems = document.querySelectorAll(".list-items");
for (i = 0; i < listItems.length; i++) {
    listItems[i].style.fontSize = "2rem";
}

const ul = document.querySelector("ul");
const li = document.createElement("li");
ul.append(li);
li.innerText = "X-men";
li.setAttribute('class', 'list-items');
// 给新元素单独设置样式
li.style.fontSize = "2rem";

方式二：用CSS类控制样式（推荐） #

把字体大小的样式写到CSS的.list-items类中，而不是通过JS设置行内样式。这样不管是页面初始的元素，还是后续动态添加的元素，只要加上这个类，就会自动应用样式，更符合样式与逻辑分离的最佳实践。

添加CSS代码：

.list-items {
  font-size: 2rem;
}

修改后的JS代码（去掉循环设置行内样式的部分）：

const title = document.querySelector("#main-heading");
title.style.color = "red";

const ul = document.querySelector("ul");
const li = document.createElement("li");
ul.append(li);
li.innerText = "X-men";
li.setAttribute('class', 'list-items');

方式三：添加新元素后重新获取并设置（不推荐） #

如果一定要坚持用JS设置行内样式，可以在添加完新<li>之后，重新获取所有.list-items元素并统一设置样式。不过这种方法会重复处理已经设置过样式的初始元素，有点冗余，不推荐使用：

const title = document.querySelector("#main-heading");
title.style.color = "red";

const ul = document.querySelector("ul");
const li = document.createElement("li");
ul.append(li);
li.innerText = "X-men";
li.setAttribute('class', 'list-items');

// 重新获取所有列表项并设置样式
const listItems = document.querySelectorAll(".list-items");
for (i = 0; i < listItems.length; i++) {
    listItems[i].style.fontSize = "2rem";
}

内容的提问来源于stack exchange，提问作者David-JSON