JavaScript 中 classList.replace 怎么用新样式类替换旧的样式类名-js教程-PHP中文网

classlist.replace()用于直接替换单个类名，仅接受两个字符串参数，精确匹配旧类名并替换为新类名，不支持正则、空格或多类批量操作。

javascript 中 classlist.replace 怎么用新样式类替换旧的样式类名

classList.replace() 是 JavaScript 中用于**直接替换一个类名**为另一个类名的方法，它比先 remove() 再 add() 更简洁、原子性更强（不会出现中间状态），且在旧类不存在时也不会报错。

基本用法：替换单个类名

语法：element.classList.replace(oldClassName, newClassName)

✅ 成功条件：元素当前含有 oldClassName，则移除它并添加 newClassName。
❌ 如果不包含旧类名，什么也不做（静默失败，不报错）。

示例：

SSL Certificate Monitor

检查一个或多个域名的 SSL/TLS 证书到期时间、颁发者、协议及 SAN 信息，用于应要求检查证书、监控到期或验证 HTTPS 等场景。

下载

const box = document.getElementById('myBox');
box.className = 'btn primary large'; // 初始类名

box.classList.replace('primary', 'secondary');
// → className 变为 'btn secondary large'

注意：不能一次替换多个类，也不能用正则或通配符

replace() 只接受两个字符串参数，仅处理**精确匹配的单个类名**。以下写法都无效：

box.classList.replace('btn', 'cta btn-lg') —— newClassName 不能含空格（会当作多个类，但方法只认第一个词）
box.classList.replace('btn.*', 'button') —— 不支持正则表达式
box.classList.replace(['old1', 'old2'], ['new1', 'new2']) —— 不支持数组批量操作

需要批量替换？可组合使用其他方法

若要一次更新多个类（比如把 a→x、b→y），需手动调用多次 replace()，或改用更灵活的方式：

用 className 字符串替换（注意边界，避免误替）：
el.className = el.className.replace(/\b(old)\b/g, 'new');
先 split(' ') 转数组，再 map() 替换，最后 join(' ') 赋回：
el.className = el.className.split(' ').map(c => c === 'old' ? 'new' : c).join(' ')
用 toggle() + add() 组合（适合有逻辑判断的场景）