Question

var el = document.querySelectorAll('.gange-color ul li'),
  colorLesit = [],
  i;
for (i = 0; i < el.length; i++) {
  colorLesit.push(el[i].getAttribute('datacolor'));
  el[i].addEventListener('click', function() {
    document.body.classList.remove('red', 'green', 'purbal', 'black');
    document.body.classList.add(this.getAttribute('datacolor'));
  })
}

* {
  box-sizing: border-box;
}

.gange-color {
  margin-left: 40%;
}

ul li {
  display: inline-block;
  list-style: none;
  width: 30px;
  height: 30px;
  margin: 30px auto;
  cursor: pointer;
}

ul li:first-child {
  background-color: red;
}

ul li:nth-child(2) {
  background-color: green;
}

ul li:nth-child(3) {
  background-color: purple;
}

ul li:last-child {
  background-color: black;
}

*emphasized text* h3 {
  color: red;
  font-size: 19px
}

.contant {
  background-color: red;
  padding: 30px;
}

.contant h4 {
  color: white;
  font-size: 17px
}

<head>
  <title>cangecolor</title> `
</head>

<body>
  <div class="gange-color">
    <ul>
      <li datacolor='red'></li>
      <li datacolor='green'></li>
      <li datacolor='purbal'></li>
      <li datacolor='black'></li>
    </ul>
  </div>
  <h3>TWFSRG</h3>
  <div class="contant">
    <h4>TESTINH</h4>
  </div>
</body>

Answer 1

因为您尚未为主体定义CSS样式，例如

body.green {
  background-color: green;
}

为什么我的代码没有更改div颜色？

1 个答案: