如何更改使用 querySelectorAll 选择的元素答案

【问题标题】：How to change elements selected using querySelectorAll如何更改使用 querySelectorAll 选择的元素
【发布时间】：2022-11-26 18:55:19
【问题描述】：

假设我有 3 个按钮：

.all-buttons{
  display:flex;
  width: 100%
 }
 .bttn{
  width: 33%
  border: none;
  background-color: blue;
  padding: 20px 20px;
color: white;
  }

<html>
<head><title>yes</title></head>
<body>
<div class="all-buttons">
  <button class="bttn">BUTTON1</button>
  <button class="bttn">BUTTON2</button>
  <button class="bttn">BUTTON3</button>
</div>
</body>
</html>

据我了解，我可以使用 JavaScript const buttons = document.querySelectorAll('bttn');，它将创建一个数组，其中包含类为 'bttn' 的每个元素。如何更改按钮的样式？例如，假设我想在单击 Button2 时更改它的背景颜色。如何使用 javascript 中的类获取 Button2？我试过这个：

const buttons = document.querySelectorAll('link');

Array.from(buttons).forEach(el => {
    el.addEventListener('click', function(event) {
               //code
    });
});

我的最终目标是为每个按钮创建一个下拉菜单，但我想避免为每个按钮添加一个 id。任何输入表示赞赏。

【问题讨论】：

试试下面的答案，希望这有帮助

标签： javascript html css

【解决方案1】：

希望能帮助到你！

const buttons = document.querySelectorAll('.bttn'); // You must declare element's type; class (.) or id (#).

Array.from(buttons).forEach(el => {
    el.addEventListener('click', function(event) {
               el.style.color = "red"; // Added the line for changing the style of the button.
    });
});

<button class="bttn">BUTTON1</button>
<button class="bttn">BUTTON2</button>
<button class="bttn">BUTTON3</button>

【讨论】：

【解决方案2】：

首先，document.querySelectorAll('bttn'); 不会获取类等于.bttn 的元素，但它会获取标签名称等于bttn 的元素。

您需要添加.，例如document.querySelectorAll('.bttn');

然后，您需要使用forEach循环并在每个button上使用click上的addEventListener方法添加事件侦听器，然后您可以使用style更改颜色或为颜色创建一个类并使用classList方法。

const buttons = document.querySelectorAll('.bttn');

buttons.forEach(button => {
  button.addEventListener('click', () => {
    button.classList.toggle('red');
  })
})

.all-buttons{
  display:flex;
  width: 100%
 }
 .bttn{
  width: 33%
  border: none;
  background-color: blue;
  padding: 20px 20px;
color: white;
  }

.red {
  background-color: red;
}

<html>
<head><title>yes</title></head>
<body>
<div class="all-buttons">
  <button class="bttn">BUTTON1</button>
  <button class="bttn">BUTTON2</button>
  <button class="bttn">BUTTON3</button>
</div>
</body>
</html>

【讨论】：

【解决方案3】：

要通过 className 获取元素，您有 2 个选项：

getElementsByClassName（没有“。”）

const buttons = document.getElementsByClassName('bttn');

querySelectorAll（带“.”）

const buttons = document.querySelectorAll('.bttn');

要更改元素的样式，您可以在该元素上使用 .style 属性：

element.style.backgroundColor = 'blue';

所以这段代码将帮助你：

const buttons = document.querySelectorAll('.bttn');

Array.from(buttons).forEach(el => {
  el.addEventListener('click', function(event) {
    el.style.backgroundColor = "blue";
  });
});

阅读更多here。

【讨论】：

【解决方案4】：

我想你需要

使用 queryseletorall 更改元素
每个按钮的下拉菜单

不对每个按钮使用 id 像下面这样实现这个尝试，

const nodeList = document.querySelectorAll(".dropbtn");
  const submenuList = document.querySelectorAll(".dropdown-content");

  //alert(nodeList.length);
  for (let i = 0; i < nodeList.length; i++) {
  
    nodeList[i].addEventListener('click', function(event) {
      submenuList[i].classList.toggle("show");
      
      });
  
    
  }

.dropbtn {
  background-color: #3498DB;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}


.dropbtn:hover, .dropbtn:focus {
  background-color: #2980B9;
}


.dropdown {
  position: relative;
  display: inline-block;
}


.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}


.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}


.dropdown-content a:hover {background-color: #ddd}

.show {display:block;}

<div class="dropdown">
    <button  class="dropbtn">Dropdown</button>
   <div  class="dropdown-content">
     <a href="#">Link 1</a>
     <a href="#">Link 2</a>
     <a href="#">Link 3</a>
  </div>
 </div>

  <div class="dropdown">
    <button class="dropbtn">Dropdown</button>
   <div class="dropdown-content">
     <a href="#">Link- 1</a>
     <a href="#">Link- 2</a>
     <a href="#">Link- 3</a>
  </div>
 </div>

如有任何疑问，请发表评论

【讨论】：