classList.toggle 案例演示，HTML/Vue代码在线实时编辑、预览

HTML

格式化

支持Emmet，输入 p 后按 Tab键试试吧！

<head> ...

展开

</head>

<body>

            
                1
2
3
4
5
6
7
8
9

            
            <!-- 示例代码 -->
<h1 class="my-element">
    Hello 笔.COOL
</h1>

<button id="btn">添加或移除 class "active" </button>

</body>

CSS

格式化

            
                1
2
3

            
            .active {
  color: red;
}

格式化

            
                1
2
3
4
5
6
7
8

            
            const element = document.querySelector('.my-element');

const toggleClass = (el, className) => el.classList.toggle(className);

// 点击按钮触发 添加或移除 class "active"
btn.onclick = () => {
  toggleClass(element, 'active');
}

预览

控制台