动态生成垂直时间轴中如何用JS修改指定li的::after伪元素样式

问题根因 #

你写的JS代码错误地将完整CSS规则赋值给了元素的className属性，className只能存储元素的类名字符串，不能直接写入CSS样式规则，所以无法生效。

解决方法 #

步骤1：在现有CSS中新增自定义样式规则

在你的CSS代码末尾添加以下规则，专门匹配带newstyle类的li元素的::after伪类：

.timeline ul li.newstyle::after {
  background: #3887be;
}

该规则只会修改目标li的圆形伪类颜色，不会影响时间轴竖线的默认颜色。

步骤2：修改JS逻辑，给目标元素添加类

将原来的JS代码替换为以下内容，直接给指定ID的li元素添加newstyle类即可：

const myArr = ['elem1', 'elem3', 'elem8']
for (var i = 0; i < myArr.length; i++) {
  const elem = document.getElementById(myArr[i])
  if (elem) {
    // 给元素添加newstyle类
    elem.classList.add('newstyle')
    // 如果你要兼容老版本浏览器，用className的写法：
    // elem.className += ' newstyle'
  }
}

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