如何实现点击列表项时切换line-through（textDecoration）样式？

嘿，我完全懂你想通过toggle来实现删除线切换的想法——毕竟比起写if-else判断样式状态，toggle的写法简洁太多了！

你之前的代码没法运行，核心原因是：e.target.style.textDecoration是一个字符串类型的属性值，它并没有内置的toggle()方法。这个toggle()方法其实是DOM元素的classList对象专属的功能，所以我们可以换个思路，用CSS类来实现这个需求。

解决方案代码 #

首先定义一个CSS类来描述删除线样式：

.strikethrough {
  text-decoration: line-through;
}

然后修改你的JavaScript代码，用classList.toggle()来切换这个类：

const items = document.querySelectorAll('li');
items.forEach(item => {
  item.addEventListener('click', (e) => {
    // 切换strikethrough类：有则移除，无则添加
    e.target.classList.toggle('strikethrough');
  })
})

你的HTML部分不需要修改，保持原样即可：

<ul>
  <li>buy milk</li>
  <li>read a book</li>
  <li>play the guitar</li>
  <li>pay the bills :(</li>
</ul>

为什么这样可行？ #

classList.toggle()会自动检测当前元素是否包含指定的类：

• 如果元素已经有strikethrough类，调用toggle后会移除它，删除线消失；
• 如果元素没有这个类，调用后会添加它，删除线出现。

这种方式不仅实现了你想要的toggle效果，还比直接操作style属性更符合样式与逻辑分离的最佳实践——所有样式规则都集中在CSS里，JavaScript只负责控制类的切换，代码更易维护。

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