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

Posted 2023-03-11

【中文标题】为通过 .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

【参考方案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>

【讨论】：

bl4ckshoxx - 这是一个懒人解决方案。小的改进可能是将活动的子 div 保留在 var (x) 中，并将点击处理程序中的循环替换为 x.className = 'my-class'; x = 事件.目标； ...

但是当我按下父 div 时会触发这个 onclick 事件。我希望我创建的每个子 div 都持有一个 onclick 方法，该方法在执行时会重置所有 div 的颜色并设置按下的 div 的颜色，这样只有一个 div 是彩色的。不知道你是否明白我在说什么：我试过你的方式，但其他 div 上的颜色没有重置

为您添加了 css - 只需点击“运行代码 sn-p”并点击一些项目

这篇文章可能有助于了解示例的工作原理：***.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);

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

【参考方案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()。