使用classList.add添加多类名报错：String contains an invalid character

嘿，我太懂这个坑了！你遇到的String contains an invalid character错误，本质是对classList.add()的用法理解出了点小偏差——这个方法要求每个传入的参数都是单个独立的CSS类名，而你传入的"fa fa-hand-rock-o"是带空格的字符串，浏览器会误以为你要添加一个包含空格的类名，但CSS类名里是不允许出现空格的（空格是用来区分多个类名的分隔符），所以直接报错了。

错误原因拆解 #

你写的这段代码：

document.getElementById("sp1").classList.add("fa fa-hand-rock-o")

相当于告诉浏览器“给这个元素加一个叫fa fa-hand-rock-o（带空格）的类”，这完全不符合CSS类名的命名规则，自然会触发错误。

正确的写法 #

classList.add()本身支持同时传入多个类名参数，你只需要把两个类名分开作为独立参数传递就行，有两种常用方式：

1. 一次性传入多个类名参数（推荐，更简洁）

document.getElementById("sp1").classList.add("fa", "fa-hand-rock-o");

2. 分两次调用add方法

const targetElement = document.getElementById("sp1");
targetElement.classList.add("fa");
targetElement.classList.add("fa-hand-rock-o");

这样就能正确给元素同时添加fa和fa-hand-rock-o两个类啦！

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