如何切换多个类名相同的元素
如何切换多个类名相同的元素
提问于 2021-02-21 03:50:49
当我单击按钮时，如何将颜色从绿色更改为红色到所有行。如果我使用getElementsbyClassName或querySelectorAll，它似乎不能使用相同的类名，只有当我使用querySelector时，第一行颜色才会改变。如果我给每个段落一个不同的id或类名.So，那么所有行的颜色都会发生变化--基本上，我如何在单击时切换多个具有相同类名的元素(在本例中，类名是'para')？这是我的代码链接- https://codepen.io/fahim04blue/pen/KKNvOZe
html-
<button id='btn' type="button" class="btn btn-primary">toggle</button>
<br>
<br>
<div>
<p class="para">Paragraph 1</p>
<p class="para">Paragraph 2</p>
<p class="para">Paragraph 3</p>
<p class="para">Paragraph 4</p>
</div>CSS -
.para{
background-color:green;
}
.para.red{
background-color:red;
}Vanilla JS
const btn = document.getElementById('btn');
const para = document.querySelector('.para');
btn.addEventListener('click',()=>{
para.classList.toggle('red');
})回答 2
Stack Overflow用户
回答已采纳
发布于 2021-02-21 03:57:45
您只选择一个元素，将querySelector更改为querySelectorAll，然后使用循环。
const btn = document.getElementById('btn');
const para = document.querySelectorAll('.para');
btn.addEventListener('click',()=>{
para.forEach(el => {
el.classList.toggle('red');
})
})Stack Overflow用户
发布于 2021-02-21 03:58:53
const btn = document.getElementById('btn');
const para = document.querySelectorAll('.para');
btn.addEventListener('click',()=>{
para.forEach(p => p.classList.toggle('red'));
})您应该使用forEach()来更改类的所有元素。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66301999
复制相关文章
点击加载更多
相似问题
scale_fill_manual不尊重价值和标签的顺序
不尊重抚养顺序？
Android不尊重颜色！
in图中的自定义离散颜色标度不尊重顺序。
颜色栏不尊重限值
腾讯云开发者
