style属性是HTML元素的内联样式声明，仅作用于当前元素，不参与CSS级联、不可被选择器匹配、不继承（除非样式本身可继承），且优先级最高可覆盖外部样式；其值为字符串但解析为CSSStyleDeclaration对象，操作须通过DOM API，如element.style.color='red'，属性名用驼峰式，单位不可省略。
什么是 style 属性，它为什么“私有”
style 是 HTML 元素的内置 DOM 属性，用于设置该元素的内联 CSS 样式。它叫“私有”不是因为语法上受保护，而是指它的值只作用于当前元素，不参与 CSS 级联、不被选择器匹配、不继承（除非样式本身可继承），且会覆盖外部样式表和 <style></style> 块中的同名声明。
关键点：它本质是字符串，但浏览器会解析为 CSSStyleDeclaration 对象，所以操作时要走 DOM API，不能直接当普通属性赋值。
用 element.style 设置单个样式最稳妥
直接写 element.style.color = 'red' 是最常用也最安全的方式。它自动处理属性名转换（如 background-color → backgroundColor），并避免拼写错误导致静默失败。
- 写法必须用驼峰命名：
fontSize✅，font-size❌（会报错或无效） - 单位通常不能省略：
element.style.width = '200px'✅，'200'❌（多数属性会失效） - 设置空字符串可清除该样式：
element.style.display = ''，但不会恢复外部定义的值，只是移除内联声明 - 读取时返回计算后值（如
getComputedStyle），但element.style.xxx只读取内联设置过的值，未设则为空字符串
批量设置用 element.style.cssText或 Object.assign
如果要一次塞入多条样式，cssText 最直接：
element.style.cssText = 'color: blue; font-size: 14px; margin: 0';
但注意：这会**完全覆盖**之前所有通过 element.style.xxx 设置的内联样式 —— 包括你可能忘了的 display 或 opacity。
更可控的做法是用 Object.assign 批量赋值（现代浏览器支持）：
Object.assign(element.style, {
color: 'blue',
fontSize: '14px',
margin: '0'
});
这个方式不会清空未提及的已有样式，适合渐进增强场景。
别踩这些坑：style 不是万能的
style 属性无法设置 CSS 自定义属性（--main-color）、伪类（:hover）、媒体查询，也不能触发重排/重绘优化 —— 它只是最底层的样式注入通道。
- 想动态控制主题？别硬塞几十条
style，改document.documentElement.style.setProperty('--theme', 'dark')更合理 - 要切换多个状态（如 loading / success / error）？用
className切换预设 class 比反复写style更可维护 - 动画相关样式（
transform,opacity）频繁修改style会强制同步布局，性能差；优先用requestAnimationFrame+transform组合 -
style设的值在 DevTools 的 “Styles” 面板里显示为 “element.style”，但若被!important外部规则压制，实际效果仍可能被覆盖
真正难的不是怎么写 style，而是判断什么时候不该用它。
