如何修改通过JS动态添加的多个元素的CSS属性？

HTML 中存在一个空的 <ul class="all-colors"></ul> 元素，每次添加或移除颜色时都会调用 ShowColors() 函数。尝试使用 document.querySelectorAll('.all-colors .color .rect') 修改颜色元素的 height、width 和 margin 属性，但该选择器返回 null。相关代码如下：

JavaScript 代码 #

const colorList = document.querySelector(".all-colors");

function ShowColors() {
  if (savedColorsArray.length <= 0)
    return;

  colorList.innerHTML = savedColorsArray.map(color => `
        <li class="color">
            <span class="rect" data-color="${color}" style="background: ${color};"></span>
        </li>`).join("");
}

CSS 代码 #

.all-colors .color .rect {
  height: 50px;
  width: 50px;
  margin: 5px;
}

HTML 代码 #

<ul class="all-colors"></ul>

出现这个问题的核心原因是调用 document.querySelectorAll 的时机不对——在 ShowColors() 函数尚未执行、DOM 元素还未插入页面时，选择器自然找不到任何元素。以下是几种可行的解决方法：

• 方法一：在 DOM 更新后立即执行修改操作
  直接在 ShowColors() 函数更新完 innerHTML 后添加样式修改逻辑，此时 DOM 已完成更新，能正确选中目标元素：

  function ShowColors() {
    if (savedColorsArray.length <= 0)
      return;
  
    colorList.innerHTML = savedColorsArray.map(color => `
          <li class="color">
              <span class="rect" data-color="${color}" style="background: ${color};"></span>
          </li>`).join("");
  
    // DOM 更新后执行样式修改
    const rects = document.querySelectorAll('.all-colors .color .rect');
    rects.forEach(rect => {
      rect.style.height = '60px';
      rect.style.width = '60px';
      rect.style.margin = '8px';
    });
  }
  

• 方法二：用 MutationObserver 监听 DOM 变化
  如果样式修改操作和 ShowColors() 的调用时机分离，可以通过 MutationObserver 监听 .all-colors 的子节点变化，一旦 DOM 更新就自动修改样式：

  const colorList = document.querySelector(".all-colors");
  const observer = new MutationObserver(() => {
    const rects = document.querySelectorAll('.all-colors .color .rect');
    rects.forEach(rect => {
      rect.style.height = '60px';
      rect.style.width = '60px';
      rect.style.margin = '8px';
    });
  });
  
  // 配置监听：只关注子节点的添加/移除
  observer.observe(colorList, { childList: true });
  
  function ShowColors() {
    if (savedColorsArray.length <= 0)
      return;
  
    colorList.innerHTML = savedColorsArray.map(color => `
          <li class="color">
              <span class="rect" data-color="${color}" style="background: ${color};"></span>
          </li>`).join("");
  }
  

• 方法三：通过 CSS 变量动态修改样式
  若只是批量修改样式，也可以用 CSS 变量替代逐个操作 DOM 元素，更简洁高效：

  .all-colors .color .rect {
    height: var(--rect-height, 50px);
    width: var(--rect-width, 50px);
    margin: var(--rect-margin, 5px);
  }
  

  然后在 JavaScript 中修改根元素的 CSS 变量：

  document.documentElement.style.setProperty('--rect-height', '60px');
  document.documentElement.style.setProperty('--rect-width', '60px');
  document.documentElement.style.setProperty('--rect-margin', '8px');
  

内容的提问来源于stack exchange，提问作者user22068966