主页 / 问题 / 938578
Accepted
Gleb Pristupa
Asked:2020-01-30 20:54:27 +0800 CST2020-01-30 20:54:27 +0800 CST

单击更改背景颜色

  • 772

您需要找到div页面上的所有内容并向每个("click"). 并且当您单击div背景颜色时会发生变化。告诉我你做错了什么

let elem1 = document.querySelectorAll('box');

elem1.forEach(function(document) {
  document.addEventListener("click", function() {
    this.style.backgroundColor = "black";
  });
});
.box {
  margin: 10px;
  display: inline-block;
  width: 100px;
  height: 100px;
  border: 1px solid black;
}
<div class="box"></div>
<div class="box"></div>
<div class="box"></div><br>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

javascript

2 个回答

  1. Best Answer

    你错过了类选择器中的一个点querySelectorAll

    let elem1 = document.querySelectorAll('.box');

elem1.forEach(function(document) {
  document.addEventListener("click", function() {
    this.style.backgroundColor="black"; 
  });
});
    .box {
  margin: 10px;
  display: inline-block;
  width: 100px;
  height: 100px;
  border: 1px solid black;
}
    <div class="box"></div>
<div class="box"></div>
<div class="box"></div><br>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

    • 1 

  2. [...document.querySelectorAll('.box')].forEach((s) => {
  s.addEventListener('click', function() {
    [...document.querySelectorAll('.box')].forEach((s) => {
      s.classList.remove('black');
    });
    s.classList.contains('black') ? s.classList.remove('black') : s.classList.add('black');
  });
});
    .black {
  background: black;
}

.box {
  margin: 10px;
  display: inline-block;
  width: 100px;
  height: 100px;
  border: 1px solid black;
}
    <div class="box"></div>
<div class="box"></div>
<div class="box"></div><br>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

    • 1

相关问题