动态生成的按钮样式 class 不起作用

Question

我有 40 个动态生成的按钮，它们的 class 属性为 'line'，问题是行 class 中的样式与 40 个按钮的样式不一样不是动态生成的三个按钮。我可以在 chrome 中看到开发人员 "line" 应用于所有 40 个按钮。

javascript:

let buttons = [];
const CLS = ["thin", "button"];
let add_btns = document.querySelector('.add-btn');
add_btns.addEventListener("click", function() {
    let i = 0;
    while (i <= 40) {
        let btn = document.createElement("BUTTON");
        buttons.push(document.body.appendChild(btn));
        i++;
        for (let button in buttons) {
            btn.setAttribute('id', "button " + button);
            btn.classList.add(...CLS);
            btn.innerHTML = "Button # " + button;
        }
        btn.addEventListener("click", function() {
            let id = this.id;
            alert("my id is: " + id);
        });
    }
});

css:

html h1,
body h1 {
  margin-top: -5rem;
  text-align: center;
  color: #41403E;
  font-size: 3rem;
}

html section,
body section {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-bottom: 3rem;
}

html section button,
body section button {
  align-self: center;
  background: transparent;
  padding: 1rem 1rem;
  margin: 0 1rem;
  transition: all .5s ease;
  color: #41403E;
  font-size: 2rem;
  letter-spacing: 1px;
  outline: none;
  box-shadow: 20px 38px 34px -26px rgba(0, 0, 0, 0.2);
  border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
}

html section button:hover,
body section button:hover {
  box-shadow: 2px 8px 4px -6px rgba(0, 0, 0, 0.3);
}

html section button.dotted,
body section button.dotted.thick {
  border: dotted 5px #41403E;
}

html section button.thin,
body section button.lined.thin {
  border: solid 2px #41403E;
}

Answer 1

我认为您没有将按钮附加到 section 元素。在您的 CSS 中，您想要的样式将仅应用于 section 元素中的按钮。但是您将动态创建的按钮附加到文档 body。

尝试为您的 section 元素提供一个 id，引用它，然后将动态创建的按钮附加到它。

像这样的东西应该可以工作：

let buttons = [];
let section = document.getElementById("section");
const CLS = ["thin", "button"];
let add_btns = document.querySelector('.add-btn');
add_btns.addEventListener("click", function() {
  let i = 0;
  while (i <= 40) {
    let btn = document.createElement("BUTTON");
    buttons.push(section.appendChild(btn));
    i++;
    for (let button in buttons) {
      btn.setAttribute('id', "button " + button);
      btn.classList.add(...CLS);
      btn.innerHTML = "Button # " + button;
    }
    btn.addEventListener("click", function() {
      let id = this.id;
      alert("my id is: " + id);
    });
  }
});

html h1,
body h1 {
  margin-top: -5rem;
  text-align: center;
  color: #41403E;
  font-size: 3rem;
}

html section,
body section {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-bottom: 3rem;
}

html section button,
body section button {
  align-self: center;
  background: transparent;
  padding: 1rem 1rem;
  margin: 0 1rem;
  transition: all .5s ease;
  color: #41403E;
  font-size: 2rem;
  letter-spacing: 1px;
  outline: none;
  box-shadow: 20px 38px 34px -26px rgba(0, 0, 0, 0.2);
  border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
}

html section button:hover,
body section button:hover {
  box-shadow: 2px 8px 4px -6px rgba(0, 0, 0, 0.3);
}

html section button.dotted,
body section button.dotted.thick {
  border: dotted 5px #41403E;
}

html section button.thin,
body section button.lined.thin {
  border: solid 2px #41403E;
}

<section id="section">
  <button class="add-btn">
Button
</button>
</section>

Answer 2

从例子中可以看出。选择器在动态生成时起作用。我相信您对 css.

中的嵌套选择器有疑问

let buttons = [];
const CLS = ["thin", "button"];
let add_btns = document.querySelector('.add-btn');
add_btns.addEventListener("click", function () {
   let i = 0;
  while (i <= 40) {
      let btn = document.createElement("BUTTON");
      buttons.push(document.body.appendChild(btn));
      i++;
      for (let button in buttons) {
          btn.setAttribute('id', "button " + button);
          btn.classList.add(...CLS);
          btn.innerHTML = "Button # " + button;
      }
      btn.addEventListener("click", function () {
          let id = this.id;
          alert("my id is: " + id);
      });
  }
});

.button {
  padding: 10px;
}

.thin {
  padding: 0px 10px;
}

<button class="add-btn button">Add</button>

动态生成的按钮样式 class 不起作用

Dynamic generated button style class not working

javascript

css

dynamically-generated