如何使用 javascript 操作 css？

Question

我试图在使用 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>

Answer 1

查看remove方法的定义：

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

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

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

...而且您可能只想删除active类，而不是btn或lightblue 。

Answer 2

在btn.classList.remove上使用remove函数时，请只输入className 。

 const myFunction = (event) => { const clickedElem = event.target const allBtns = document.querySelectorAll('.btn.lightblue') allBtns.forEach(btn => btn.classList.remove('active')) clickedElem.classList.add('active') }

 .active { background: red; }

 <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>

Answer 3

您可以使用 1) Element.style = "..." 或 2) Element.classList.add("...")

到

1. 用 style 属性覆盖 css
2. 向元素添加一个类以使其使用预定义的样式。 （注意元素可以有多个类）