JS 中使用 forEach 的範例

這裡利用 forEach 及加入 function toggleOpen 來改變所有子元素字體大小顏色，只要一旦在文字上按下，字體會變大及改變顏色。

HTML:

<div class="panels">
  <div class="panel panel1">123</div>
  <div class="panel panel2">123</div>
  <div class="panel panel3">123</div>
  <div class="panel panel4">123</div>
  <div class="panel panel5">123</div>
</div>

CSS:

.tyy{
 color: red;
  font-size:80px;
}

JavaScript:

const panels = document.querySelectorAll('.panel');

function toggleOpen() {
  this.classList.toggle('tyy');

  // 或可以直接寫成
  this.style.color = "red";
  this.style.fontSize = "80px";
  this.style.backgroundColor = "green";
}

panels.forEach(panel => panel.addEventListener('click', toggleOpen));