element.setAttribute与element.style.setProperty的区别及最佳实践

核心差异 #

1. 对原有内联样式的影响 #

• 使用element.setAttribute('style', '--my-custom-var: 10px;')会完全覆盖元素原有的内联样式。比如元素原本有style="color: red;"，执行后内联样式会仅保留--my-custom-var: 10px;，原有样式直接丢失。
• element.style.setProperty('--my-custom-var', '10px')只会追加或修改目标自定义变量，不会改动其他已存在的内联样式规则。

2. 操作粒度与灵活性 #

• setAttribute是直接操作整个style属性字符串，若要一次性设置多个样式，需手动拼接字符串，容易因遗漏原有样式引发问题；且无法为单个属性设置important优先级。
• setProperty支持针对单个CSS属性的精准操作，还可通过第三个参数设置属性优先级，比如element.style.setProperty('--my-custom-var', '10px', 'important')，这是setAttribute做不到的。

3. 性能表现 #

• setAttribute每次调用都会让浏览器重新解析整个style字符串，相当于重建整个内联样式块，频繁操作时性能开销更大。
• setProperty直接操作样式对象的单个属性，无需重新解析完整样式字符串，性能更优，尤其适合频繁修改样式的场景。

最佳实践 #

• 优先使用element.style.setProperty()：它精准安全，不会破坏原有样式，支持优先级设置，性能表现更好，是动态修改（包括自定义变量在内的）CSS属性的标准方案。
• 仅当需要完全重置或一次性设置所有内联样式时，才考虑使用setAttribute('style', ...)，但这种场景极少，绝不推荐用于修改单个自定义变量。

补充：你提到的element.style["--my-custom-var"] = value无效，是因为DOM的style对象最初仅暴露标准CSS属性，自定义变量不属于标准属性范畴，因此无法通过这种方式赋值，而setProperty是专门用于处理任意CSS属性（包括自定义变量）的API。

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