点击查看html编辑器说明文档

classList.toggle 案例演示edit icon

|
|
Fork(复制)
|
|
作者:
天生闹腾
提交反馈
嵌入
设置
下载
HTML
格式化
支持Emmet,输入 p 后按 Tab键试试吧!
<head> ...
展开
</head>
<body>
<!-- 示例代码 -->
<h1 class="my-element">
    Hello 笔.COOL
</h1>

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


</body>
CSS
格式化
.active {
  color: red;
}
JS
格式化
const element = document.querySelector('.my-element');

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

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