JavaScript如何覆盖含连字符(-)的类名 实现购物车按钮切换

实现购物车按钮切换功能时，初始编写代码如下：

let cartIcon = document.querySelector('#cart-icon')
let cart = document.querySelector('.cart')
let cartClose = document.querySelector('#close-cart')

cartIcon.onclick = () => {
    cart.classList.add("active");
    console.log(cart)
};
cartClose.onclick = () => {
    cart.classList.remove("active");
}

代码运行后控制台打印的cart元素类名为cart active，两个类名以空格分隔为独立类，不符合预期的带连字符cart-active类名效果，控制台运行表现如下：

DOM元素的classList接口操作的是空格分隔的独立类名集合，调用add/remove方法时只会直接增删传入的独立类名，不会自动将传入值和元素已有类名拼接为带连字符的组合类名，因此传入"active"时只会追加独立的active类，不会自动生成cart-active。

方案1：直接操作目标类名 #

如果你的激活态样式绑定在.cart-active类上，直接修改传入classList的类名字符串即可。推荐保留基础cart类，仅将cart-active作为状态类增删，最终元素类名为cart cart-active，CSS通过.cart.cart-active选择器匹配激活态即可，这是前端开发的通用实践，可维护性更高：

let cartIcon = document.querySelector('#cart-icon')
let cart = document.querySelector('.cart')
let cartClose = document.querySelector('#close-cart')

cartIcon.onclick = () => {
    cart.classList.add("cart-active");
};
cartClose.onclick = () => {
    cart.classList.remove("cart-active");
}

如果业务要求必须将基础类整体替换为cart-active，增删类名时同步处理基础类即可：

cartIcon.onclick = () => {
    cart.classList.remove("cart");
    cart.classList.add("cart-active");
};
cartClose.onclick = () => {
    cart.classList.remove("cart-active");
    cart.classList.add("cart");
}

方案2：用toggle方法简化切换逻辑 #

对于类名开关场景，可直接使用classList.toggle方法简化代码，不需要手动判断类名是否存在：

// 点击购物车图标直接切换激活态
cartIcon.onclick = () => cart.classList.toggle("cart-active");
// 点击关闭按钮强制移除激活态
cartClose.onclick = () => cart.classList.remove("cart-active");

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