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

【问题标题】：Style all Elements of a div created via .createElement('div')为通过 .createElement('div') 创建的 div 的所有元素设置样式
【发布时间】：2021-12-04 11:28:29
【问题描述】：

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

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

所以现在我想为我创建的每个 div 添加一个 onlick 事件，重置父 div 内的每个其他 div 的颜色，这样就不会选择多个子 div，然后为点击的div设置颜色为另一种颜色！

有什么想法吗？

【问题讨论】：

在父节点上添加单个 onclick 处理程序并处理 event.target
@Dragan 很好的建议，但根据经验，不要在没有 .closest() 方法的情况下使用 event.target。否则target 可能无法代表您的预期。
只是我的好奇心：在给定的示例中，我需要在哪里使用最接近的？
@DraganS 在你使用 event.target... 或者换句话说 event.target.closest(".some_selector")
currentTarget 呢？ developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget

标签： javascript html css createelement

【解决方案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;
}

&lt;div class="parent-div"&gt;&lt;/div&gt;

【讨论】：

bl4ckshoxx - 这是一个懒人解决方案。小的改进可能是将活动的子 div 保留在 var (x) 中，并将点击处理程序中的循环替换为 x.className = 'my-class'; x = 事件.目标； ...
但是当我按下父 div 时会触发这个 onclick 事件。我希望我创建的每个子 div 都持有一个 onclick 方法，该方法在执行时会重置所有 div 的颜色并设置按下的 div 的颜色，这样只有一个 div 是彩色的。不知道你是否明白我在说什么：我试过你的方式，但其他 div 上的颜色没有重置
为您添加了 css - 只需点击“运行代码 sn-p”并点击一些项目
这篇文章可能有助于了解示例的工作原理：stackoverflow.com/questions/4616694/…
在 JS 中，避免使用parentDiv.onclick。有上级Element.addEventListener()。另外，不要使用className = 使用Element.classList 及其适当的方法，如add()、remove()、toggle() 等。

【解决方案2】：

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

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

【讨论】：

【解决方案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';
       }
     })

【讨论】：

你应该用beautifier.io之类的来格式化代码，并添加一些cmets来解释代码的作用。

【解决方案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);
}

&lt;div class="parent-div"&gt;&lt;/div&gt;

【讨论】：

【解决方案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;
}

&lt;div id="parent"&gt;&lt;/div&gt;

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

【讨论】：