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

标签 javascript html css createelement

所以我在另一个父级中创建了多个新的子 div div使用此代码:

var parentDiv = document.querySelector('.parent-div')
const newDiv = document.createElement('div');
parentDiv.appendChild(newDiv);
所以现在我想添加一个 onlick每个事件 div我创建了,它会为每个其他人重置颜色 div在父级内部 div ,这样就不会选中多个子div,然后只为点击的div设置颜色到另一种颜色!
有任何想法吗?

最佳答案

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>

关于javascript - 为通过 .createElement ('div' 创建的 div 的所有元素设置样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/69598608/

相关文章:

javascript - 在 PHP 中使用 Ajax 提交图像文件

css - CSS中的逗号,使用相同CSS的多个选择器

Javascript Electron Menu() 不是构造函数

javascript - button onclick= 返回不带斜线的 var

html - 有没有办法在响应式设计中设置特定间距并占据整个宽度?

javascript - HTML下拉列表:如何处理选择选项元素的关键事件

html - 如何在 Safari 手机上消除光泽效果

css - CSS-垂直文本与另一个div内容重叠

css - 如何为 JavaFX 中的按钮创建具有半透明背景的圆 Angular 边框?

javascript - 禁用/检测Windows 7截图工具?