直接操作元素的style属性是最常用、最直观的动态修改内联样式方式，仅影响HTML中style特性，需驼峰命名、字符串带单位，可用Object.assign批量设置，读取仅限内联样式，清除用removeProperty或赋空字符串，适用于临时即时样式变更但需注意性能。
直接操作元素的 style 属性是最常用、最直观的动态修改内联样式方式，它只影响该元素的 style 特性（即 HTML 中的 style="..."），不改变 CSS 类或外部样式表。
用点号语法逐个设置样式
每个 DOM 元素都有一个 style 对象，它是 CSSStyleDeclaration 类型。设置时需注意：
- CSS 属性名要转为驼峰式：比如
background-color→backgroundColor，font-size→fontSize，z-index→zIndex，float→cssFloat - 所有值必须是字符串，且带单位（如
'16px'、'2em'、'bold'）；数字16或无单位的'16'不生效 - 赋值立即生效，无需刷新或重载
示例：
const box = document.getElementById('myBox');<br>box.style.color = 'red';<br>box.style.fontSize = '18px';<br>box.style.borderRadius = '6px';<br>box.style.backgroundColor = '#f9f9f9';
立即学习“Java免费学习笔记（深入）”；
java-api-doc-generator
下载
分析 Java Spring Boot 后端 Controller 代码，自动生成 Markdown 格式的接口文档。当用户说“生成 Java 接口文档”、“生成 API 文档”、“从 Spring 代码生成文档”时触发。
批量设置多个样式
避免重复写 element.style.xxx = yyy，推荐用 Object.assign() 一次性注入：
- 传入一个对象字面量，键为驼峰式属性名，值为带单位字符串
- 不支持传入数字、省略单位、或使用 CSS 原生短横线写法
示例：
Object.assign(box.style, {<br> color: '#333',<br> padding: '12px 20px',<br> margin: '8px 0',<br> borderRadius: '4px',<br> transition: 'all 0.3s ease'<br>});
读取和清除内联样式
element.style.xxx 只能读取**显式写在 HTML style 特性里的值**，不会返回类名或外部 CSS 定义的样式：
- 若 HTML 是
<div style="width: 200px"></div>，则div.style.width返回"200px" - 若宽度来自
.card { width: 300px; }，则div.style.width返回空字符串"" - 要获取最终计算结果（含继承、层叠），应调用
getComputedStyle(element).width - 清除某项内联样式可用
element.style.removeProperty('background-color')（注意用短横线命名）或直接赋空字符串：element.style.border = ''
style 修改的适用场景与注意事项
这种方式适合临时、唯一、需即时响应的样式变更，比如拖拽反馈、表单校验高亮、按钮点击态等：
- 每次赋值都可能触发浏览器重排（reflow）或重绘（repaint），频繁操作会影响性能
- 无法通过
style设置!important，也不支持伪元素（::before/::after）样式 - 日常开发中，更推荐预设 CSS 类 +
classList.add/remove/toggle，兼顾性能、可维护性和动画支持
