为通过 .createElement('div') 创建的 div 的所有元素设置样式

Question

所以我在另一个父 div 中创建了多个新的子 div，代码如下：

var parentDiv = document.querySelector('.parent-div')
const newDiv = document.createElement('div');
parentDiv.appendChild(newDiv);

所以现在我想为我创建的每个 div 添加一个 onlick 事件，它会重置父 div 中每个其他 div 的颜色，所以没有选择多个子div，然后仅将点击的颜色div设置为另一种颜色！

有什么想法吗？

Answer 1

var parentDiv = document.querySelector('.parent-div');
for (let i = 0; i < 10; ++i) {
  const newDiv = document.createElement('div');
  newDiv.className = "my-class";
  newDiv.innerText = `Foo${i}`;
  parentDiv.appendChild(newDiv);
}
parentDiv.onclick = (event) => {
  document.querySelectorAll('.my-class').forEach((el) => {
    el.className = "my-class";
  });
  event.target.className += " active";
}

.my-class {
  color: red;
}

.active {
  color: blue;
}

<div class="parent-div"></div>

Answer 2

出于多种原因，我不确定您是否希望这样做，但更改父 div 的 HTML 值可能对您有益。例如，

var parentDiv = document.querySelector('.parent-div')
parentDiv.innerHTML = parentDiv.innerHTML + "<div class='{class name}'></div>";

Answer 3

        let parentDiv = document.querySelector('.parent-div');
        for (let x = 0; x < 10; x++) {

         let newDiv = document.createElement('div');
       newDiv.classList.add('see')

        parentDiv.appendChild(newDiv);
      }


      parentDiv.addEventListener('click', (e) => {
       if (e.target.tagName === 'DIV') {
         e.target.style.backgroundColor = 'red';
       }
     })

Answer 4

此处提出的方法知道上次单击了哪个 div，相应地更改其样式并在创建项目时创建 onclick。

var parentDiv = document.querySelector('.parent-div');
let lastDiv = undefined;
for (let i = 0; i < 10; i++) {
    let newDiv = document.createElement('div');
    newDiv.style.width = "100px";
    newDiv.style.height = "100px";
    newDiv.style.backgroundColor = "black";
    newDiv.style.border = "1px solid white";
    newDiv.onclick = function() {
        if (lastDiv) lastDiv.style.backgroundColor = "black";
        newDiv.style.backgroundColor = "green";
        lastDiv = newDiv;
    };
    parentDiv.appendChild(newDiv);
}

<div class="parent-div"></div>

Answer 5

只是建议一个更健壮和灵活的方法：

// Utility functions
const EL = (sel, EL) => (EL||document).querySelector(sel);
const ELS = (sel, EL) => (EL||document).querySelectorAll(sel);
const ELNew = (tag, prop) => Object.assign(document.createElement(tag), prop);

// Now...

// Get element (Use an ID, not a class)
const EL_parent = EL('#parent');

// Function to toggle "is-active" class
const toggleActive = (EL_target, EL_parent) => {
  const EL_active = EL(".is-active", EL_parent);
  if (EL_active) EL_active.classList.remove("is-active");
  EL_target.classList.add("is-active");
};

// Function to create new child elements
const newChild = (content) => ELNew("div", {
  className: "child",
  innerHTML: content,
  onclick() {
    toggleActive(this, EL_parent);
  }  
});

// Create a couple of elements....
EL_parent.append(
  newChild("1 Lorem"),
  newChild("2 Ipsum"),
  newChild("3 Dolor"),
);

.is-active {
  background: gold;
}

<div id="parent"></div>

所以这是一个更好的方法，避免像 className = 或 Event.target 这样草率的代码而不使用 .closest()，如其他答案所示。

为通过 .createElement('div') 创建的 div 的所有元素设置样式

Style all Elements of a div created via .createElement('div')

html

javascript

css

createelement