javascript中通过元素style属性可直接设置内联样式，仅影响style特性，对应cssstyledeclaration对象且属性名驼峰式；object.assign可批量赋值，但值须为带单位字符串；读取时仅返回显式内联值，获取计算样式需用getcomputedstyle。
JavaScript 中通过元素的 style 属性可以直接设置或修改内联样式，这是最常用、最直接的方式。它操作的是元素的 style 对象，对应 HTML 中的 style 特性（如 style="color: red; font-size: 14px;"），只影响内联样式，不会覆盖 CSS 类或外部样式表中的规则（除非用 !important，但 style 属性本身不支持写 !important）。
基本语法：点号访问 + 字符串赋值
DOM 元素的 style 是一个 CSSStyleDeclaration 对象，它的属性名是驼峰式（camelCase），而非 CSS 中的短横线格式：
-
backgroundColor← 对应 CSS 的background-color -
fontSize← 对应font-size -
zIndex← 对应z-index（注意不是zindex） -
cssFloat← 对应float（IE 中曾用styleFloat，现代浏览器统一用cssFloat）
示例：
const box = document.getElementById('myBox');
box.style.color = 'blue';
box.style.fontSize = '16px';
box.style.backgroundColor = '#f0f0f0';
box.style.borderRadius = '4px';
批量设置多个样式：用 Object.assign 或循环
逐行写 style.xxx = yyy 冗长，可借助 Object.assign() 一次性注入多个样式：
Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...
Object.assign(box.style, {
color: 'white',
padding: '12px 20px',
margin: '8px 0',
borderRadius: '6px'
});
注意：Object.assign() 只接受对象字面量，且所有值必须是字符串（带单位，如 '12px'、'bold'）。不能传数字（如 12）或省略单位（如 '12' 会失效）。
读取当前内联样式值
element.style.xxx 只能读取**内联样式中显式设置的值**，无法获取 CSS 类或外部样式表计算后的结果：
- 如果 HTML 写了
<div id="a" style="width: 200px"></div>，那么a.style.width返回"200px" - 如果宽度由
.card { width: 300px; }定义，则a.style.width返回空字符串""
如需获取最终计算样式（含继承、层叠结果），应使用 getComputedStyle(element).propertyName：
const computed = getComputedStyle(box); console.log(computed.fontSize); // "16px"（实际渲染值）
注意事项与常见陷阱
-
单位不能省略：除少数无单位属性（如
zIndex、opacity、fontWeight），多数数值型样式必须带单位（'10px'、'2em'、'#333'） -
设置为 '' 表示移除该内联样式：如
box.style.color = ''相当于从style属性中删掉color声明 -
慎用 style 覆盖重要样式：频繁修改
style容易导致维护困难；复杂 UI 推荐切换 CSS 类（element.classList.add/toggle/remove）更清晰、更高效 - 避免内联样式污染：动态样式若逻辑复杂，建议提前在 CSS 中定义好类名，JS 只负责开关
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
