快速修改style.cssText提升性能技巧

通过 `style.cssText` 一次性批量设置内联样式，能显著减少 DOM 重排次数、提升页面渲染性能，但需注意其会清空原有内联样式；若要安全叠加新样式，推荐使用 `+=` 操作并前置分号以兼容旧版 IE；更健壮的实践是优先采用 `classList` 管理预定义 CSS 类，或封装工具函数来统一处理兼容性、空值和格式问题——既保障性能，又兼顾可维护性与代码健壮性。

直接用 style.cssText 一次性写入多条 CSS 声明，能减少 DOM 重排（reflow）次数，比逐个设置 element.style.xxx 更高效。

基本写法：覆盖式赋值

适用于需要完全重置内联样式的场景：

• 语法简洁：el.style.cssText = "width:200px; height:100px; background:red; border-radius:4px;"
• 浏览器只触发一次样式计算和布局，性能优于连续赋值多个 style.xxx
• 注意：会清空该元素原有的所有内联样式（比如原来有 color:blue，执行后就没了）

安全叠加：保留原有内联样式

若只想新增或修改部分样式，不破坏已有内联样式，需手动拼接：

• 推荐写法：el.style.cssText += "; margin:10px; font-weight:bold;"
• 开头加分号是为了兼容旧版 IE（IE6–8）——它在读取 cssText 时会自动删掉末尾分号，导致拼接出错；加分号可规避解析断裂
• 不建议直接用 el.style.cssText = el.style.cssText + "..."，因为空字符串或未初始化时易出错；+= 更稳妥

替代方案：更健壮的批量设置方式

当逻辑变复杂、需兼顾可维护性与兼容性时，可考虑这些做法：

• 预先定义 CSS 类（如 .highlight），用 el.className = "highlight" 或 el.classList.add("highlight") 切换——语义清晰、无覆盖风险
• 封装工具函数，自动处理空值、分号、IE 兼容等细节，例如：

注意事项

这些点容易忽略但影响实际效果：

• cssText 只作用于内联样式，无法读取或修改 CSS 文件或