直接操作元素的style属性可动态修改内联样式，需用驼峰命名（如backgroundcolor），赋值即生效；支持单个设置、object.assign批量设置及模板字符串拼接单位；读取仅限内联值，清空用空字符串或removeattribute('style')。
直接操作元素的 style 属性即可动态修改内联样式，这是最常用、最直接的方式。
通过 element.style.属性名 设置单个样式
DOM 元素的 style 是一个 CSSStyleDeclaration 对象，它的属性名遵循驼峰命名规则（如 backgroundColor 而非 background-color），赋值即生效：
elem.style.color = 'red'elem.style.fontSize = '16px'-
elem.style.borderTop = '2px solid #000'（复合属性支持，但注意是驼峰+完整值） -
elem.style.display = 'none'或'block'
批量设置：用 Object.assign() 或循环赋值
避免重复写 elem.style.xxx，可一次性应用多个样式：
- 使用
Object.assign(elem.style, { color: 'blue', fontSize: '18px', margin: '10px' }) - 注意：CSS 属性名仍需驼峰化（如
backgroundColor），但简写属性（如margin、font）可直接用字符串值 - 也可用
for...in遍历对象并逐个赋值，兼容性更好
设置带单位的数值（如 px、%、em）
绝大多数长度、尺寸类 CSS 属性必须显式带单位（0 除外）：
- ✅ 正确：
elem.style.width = '200px'、elem.style.left = '50%'、elem.style.opacity = '0.8'（opacity 无单位） - ❌ 错误：
elem.style.width = 200（会被忽略，不生效） - 小技巧：可用模板字符串拼接，如
elem.style.padding = `${gap}px`
读取和清除内联样式
读取当前内联值用 elem.style.属性名；清空某项样式可设为空字符串：
-
console.log(elem.style.color)—— 仅读取内联设置的值（不包含 CSS 文件或继承值） -
elem.style.color = ''—— 移除该内联样式，恢复由 CSS 规则或默认值决定的外观 - 要彻底清空所有内联样式，可用
elem.removeAttribute('style')
