直接修改 element.style.xxx 只影响行内样式、优先级高但易出错，需驼峰命名、值为字符串，读取应使用 getcomputedstyle()，批量操作推荐 classlist，自定义变量须用 setproperty/getpropertyvalue。
直接改 element.style.xxx 是最常用也最容易出错的方式
这种方式只影响行内样式，优先级高，但会覆盖 CSS 文件或 <style></style> 中的同名属性。常见错误是拼错属性名（比如写 element.style.background-color 报错），因为横杠不能直接当属性名用。
必须转成驼峰命名：backgroundColor、fontSize、zIndex、borderRadius 等。CSS 属性里带连字符的，JS 中一律去掉连字符、后面字母大写。
const el = document.getElementById('box');
el.style.width = '200px';
el.style.backgroundColor = '#f0f0f0';
el.style.borderRadius = '8px';
- 值必须是字符串（哪怕数字也要加
'px'、'em'等单位） - 设为
''（空字符串）相当于移除该行内样式，但不会恢复 CSS 规则中的值 - 设为
'initial'或'unset'可触发 CSS 重置行为，但兼容性需留意（IE 不支持unset）
用 getComputedStyle() 读取最终计算样式，别信 style
element.style 只返回行内设置的值，不反映实际渲染效果。getComputedStyle(el) 才能拿到浏览器计算后的完整样式（包括继承、层叠、媒体查询生效后的结果）。
const el = document.querySelector('.item');
const computed = getComputedStyle(el);
console.log(computed.width); // '200px'
console.log(computed.fontSize); // '16px'
console.log(computed.display); // 'block'
- 返回的是只读的
CSSStyleDeclaration对象，不能直接赋值 - 注意：伪元素（如
::before）要传第二个参数，例如getComputedStyle(el, '::before') - 在元素未插入 DOM 或
display: none时，部分属性可能返回默认值或'auto'，不可靠
批量操作推荐 className 或 classList，而不是连写 style
逐个设 style.xxx 容易遗漏、难维护，也容易引发重复渲染。更可靠的做法是预定义 CSS 类，用 JS 切换类名。
立即学习“Java免费学习笔记（深入）”；
.highlight {
background-color: #ffeb3b;
font-weight: bold;
padding: 4px 8px;
}
然后：
const el = document.getElementById('text');
el.classList.add('highlight'); // 添加
el.classList.remove('highlight'); // 移除
el.classList.toggle('highlight'); // 切换
el.classList.contains('highlight'); // 检查
-
classList是现代标准，IE10+ 支持；IE9 及以下可用className字符串拼接（但要注意空格和重复） - 避免直接赋值
el.className = 'new-class'，会清空所有已有类 - 动态生成样式规则？用
document.styleSheets+insertRule，但极少需要，且跨域样式表不可写
修改自定义 CSS 变量（--xxx）要走 style.setProperty()
如果页面用了 CSS 自定义属性（比如 :root { --primary-color: #333; }），不能用 style.color 这种方式改，得用 setProperty 和 getPropertyValue。
document.documentElement.style.setProperty('--primary-color', '#007bff');
// 或作用于某个元素
el.style.setProperty('background-color', 'var(--primary-color)'); // 注意这里是设值，不是读
- 读取变量值要用
getComputedStyle(el).getPropertyValue('--my-var') - 变量名区分大小写，
--MainColor和--maincolor是两个不同变量 - 变量值若含单位（如
2rem）或函数（如rgb(0, 123, 255)），要原样传字符串
style 只是冰山一角；真正可靠的样式控制，往往依赖 class 的增删与 CSS 变量的配合，而不是硬编码一堆 el.style.xxx = yyy。 
