直接修改 element.style 仅影响行内样式，无法覆盖外部 CSS 规则（除非后者含 !important 且未被更高优先级行内样式压制）；需用驼峰命名、带单位赋值；读取时仅返回行内值，应使用 getComputedStyle() 获取最终样式；批量操作推荐 classList；动态注入样式宜用 <style> 标签；伪元素样式须通过 CSS 变量或预设类名控制。
直接改 element.style 只影响行内样式
用 JavaScript 动态改样式最常见的方式是操作 element.style，但它只读写 HTML 元素的 style 属性（即行内样式），不会覆盖 CSS 文件或 <style> 里的规则，除非后者用了 !important 且没被更高优先级的行内样式压制。
常见误区：以为 div.style.color = 'red' 能让所有匹配该 div 的 CSS 规则失效——其实只是新增了一条优先级最高的行内声明。
-
style属性名要用驼峰式：backgroundColor，不是background-color - 单位不能省略：
element.style.width = '200px'，写'200'无效 - 读取时只能拿到行内设置的值，
getComputedStyle()才能读最终生效样式
批量改样式用 className 或 classList 更可靠
频繁操作多个样式属性时，硬写 style.xxx 容易出错、难维护。推荐把样式抽到 CSS 类里，再用 JS 切换类名。
element.className = 'active highlight' 会完全替换原有类；更安全的是用 classList：
立即学习“Java免费学习笔记（深入）”；
element.classList.add('active');
element.classList.remove('disabled');
element.classList.toggle('hidden');
element.classList.contains('error'); // true / false
-
classList是现代浏览器标配（IE10+），比操作className字符串安全得多 - 避免手动拼接字符串导致重复类名或空格问题
- 服务端渲染或 SSR 场景下注意初始类名是否已存在，
toggle()行为依赖当前状态
动态插入 CSS 规则要用 document.styleSheets 或 <style>
如果需要在运行时注入新样式（比如主题色切换、暗色模式适配），不能靠改单个元素的 style，得操作样式表。
最稳妥的做法是创建 <style> 标签并追加到 <head>：
const style = document.createElement('style');
style.textContent = `
.theme-dark { background: #1a1a1a; color: #eee; }
.theme-dark button { border-color: #444; }
`;
document.head.appendChild(style);
- 不建议直接改
document.styleSheets[0].insertRule()，跨域样式表会触发 SecurityError - 用
<style>标签方式兼容性好，也方便后续用style.remove()清理 - 若需高频切换（如实时预览），可预先定义好所有主题类，只切
document.body.className
修改伪元素样式只能靠切换类或 CSS 变量
::before、::after 这些伪元素无法用 JS 直接访问，element.style 和 getComputedStyle(element, '::before') 都只能读，不能写。
可行方案只有两个：
- 用 CSS 变量（
custom properties）作为桥梁：:root { --icon-color: blue; } .icon::before { color: var(--icon-color); }然后 JS 改document.documentElement.style.setProperty('--icon-color', 'red') - 提前写好不同状态的类（如
.icon--warning），用classList切换
别试图用 innerHTML 注入带伪元素的新标签——那只是复制结构，不是控制原生伪元素行为。
