17370845950

在使用 MutationObserver 监听动态插入的 DOM 节点时，常遇到这样的场景：新添加的

✅ 正确写法：使用 element.style.property

const targetNode = document.getElementById('myElement');

const observer = new MutationObserver(mutations => {
  for (const mutation of mutations) {
    for (const addedNode of mutation.addedNodes) {
      // 确保是元素节点（排除文本节点、注释节点等）
      if (addedNode.nodeType === Node.ELEMENT_NODE && addedNode.nodeName === 'LI') {
        // ✅ 正确：直接设置 style 属性
        addedNode.style.background = 'red';
        addedNode.style.color = 'white';
        addedNode.style.padding = '8px 12px';

        // 也可批量设置（推荐用于复杂样式）
        Object.assign(addedNode.style, {
          background: 'linear-gradient(to right, #ff6b6b, #4ecdc4)',
          borderRadius: '4px',
          fontWeight: 'bold'
        });
      }
    }
  }
});

observer.observe(targetNode, { childList: true, subtree: true });

❌ 常见错误与说明

• addedNode.setAtribute("style", "...") → 拼写错误（应为 setAttribute），且 setAttribute('style', ...) 虽可工作，但会完全覆盖原有内联样式，不推荐；
• addedNode.body.style... → body 是 document 的属性，addedNode 是单个元素，不存在 body 子属性，语法错误；
• 忘记检查 nodeType → mutation.addedNodes 可能包含文本节点（Node.TEXT_NODE），直接调用 .style 会报错，务必先过滤：if (addedNode.nodeType === Node.ELEMENT_NODE)。

? 进阶提示：增强匹配精度（避免误操作）

若页面中存在多个

if (
  addedNode.nodeType === Node.ELEMENT_NODE &&
  addedNode.nodeName === 'LI' &&
  addedNode.textContent.trim().startsWith('Important:') &&
  addedNode.parentElement?.id === 'notification-list'
) {
  addedNode.style.borderLeft = '4px solid #e74c3c';
  addedNode.style.fontWeight = '600';
}

? 总结

• ✅ 首选方案：addedNode.style.xxx = value —— 安全、高效、可叠加；
• ✅ 动态样式应配合 nodeType 校验，防止运行时错误；
• ✅ 复杂样式建议用 Object.assign(element.style, {...}) 提升可读性与维护性；
• ⚠️ 避免滥用 setAttribute('style', ...)，它会清空已有内联样式，不利于样式复用与调试。

通过这种方式，你无需为每个动态节点预设 class 或 id，也能实现精准、可控、响应式的样式注入。