使用 style.cssText 一次性写入多条 CSS 声明可减少重排次数、提升性能，但会清空原有内联样式；安全叠加需用 += 并前置分号兼容旧 IE；推荐优先使用 classList 或封装工具函数。

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

基本写法：覆盖式赋值

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

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

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

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

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

• 推荐写法：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 兼容等细节，例如：

function setStyles(el, cssStr) {
  const s = el.style;
  s.cssText += ";" + cssStr.replace(/;+$/, "");
}

注意事项

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

• cssText 只作用于内联样式，无法读取或修改 CSS 文件或 中的规则
• 它设置的样式优先级高于外部样式表，但会被带 !important 的声明覆盖
• 现代浏览器（Chrome/Firefox/Safari/Edge）均支持，IE9+ 也可靠；IE8 及以下已基本退出主流使用场景
• 若需读取最终生效样式（含继承、层叠结果），应使用 getComputedStyle(el)，而非 el.style

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！