如何为动态添加的无ID/无Class节点设置内联样式

在使用 MutationObserver 监听动态插入的 DOM 节点时，常需对特定类型的新元素（例如

关键在于：Element.style 是一个 CSSStyleDeclaration 对象，支持直接赋值标准 CSS 属性（驼峰命名），而非通过 setAttribute 或访问不存在的 .body 属性。

✅ 正确写法：

addedNode.style.background = 'red';
// 或更完整的写法（推荐兼容性与可维护性）
addedNode.style.backgroundColor = 'red';
addedNode.style.padding = '8px';
addedNode.style.borderRadius = '4px';

❌ 常见错误及原因：

• addedNode.setAtribute("style", "...")：拼写错误（应为 setAttribute），且 setAttribute('style', ...) 虽能工作，但不如直接操作 style 对象高效、直观；
• addedNode.body.style.background = ...：addedNode 是
• 元素本身，没有 .body 属性（document.body 才有），此写法会抛出 Cannot read property 'style' of undefined 错误。

? 补充建议：

• 添加类型校验，确保 addedNode 是元素节点（避免处理文本节点、注释节点等）：

  if (addedNode.nodeType === Node.ELEMENT_NODE && addedNode.nodeName === 'LI') {
      addedNode.style.backgroundColor = 'red';
  }

• 若需批量设置样式，可使用 Object.assign：

  Object.assign(addedNode.style, {
      backgroundColor: 'red',
      fontWeight: 'bold',
      margin: '4px 0'
  });

• 注意：内联样式优先级高于外部样式表，但若原元素已有 !important 样式，可能被覆盖；必要时可在 CSS 中提高特异性，或改用 classList.add() 配合预设 CSS 类（更利于维护）。

总之，直接赋值 addedNode.style.propertyName 是最简洁、可靠、符合规范的方式——无需ID、无需Class，只依赖节点引用本身。