时间戳

首页 > 解决方案 > 如何使用 javascript 操作 css？

javascript - 如何使用 javascript 操作 css？

问题描述

在使用 javascript 单击按钮时，我试图操纵 css。我只想让一个按钮激活最近单击的按钮。

我能够使其处于活动状态，但不知何故我无法为其他未选择的活动删除

这是我在 js 中尝试过的

const myFunction = (event) => {
  const clickedElem = event.target
  const allBtns = document.querySelectorAll('.btn.lightblue')
  allBtns.forEach(btn => btn.classList.remove('.btn.lightblue.active'))
  clickedElem.classList.add('active')
}
<p> 
  <button onclick="myFunction(event)" class="btn lightblue">XASD</button>
  <button onclick="myFunction(event)" class="btn lightblue">QWER</button>
  <button onclick="myFunction(event)" class="btn lightblue">ASDF</button>
  <button onclick="myFunction(event)" class="btn lightblue">ZXCV</button>
</p>

标签： javascripthtml

解决方案

查看remove方法的定义：

tokenList.remove(token1[, token2[, ...tokenN]]);

它将您要删除的每个类作为一个单独的参数（每个类都有一个类名的字符串）。

CSS 选择器不需要单个参数。

...而且您可能只想删除该active课程，而不是btnor lightblue。

推荐阅读