JavaScript如何操作样式_CSS与JavaScript如何交互_技术教程

直接修改 element.style 仅影响行内样式，优先级高但范围窄；应使用 classList 管理类名、getComputedStyle() 获取最终样式、动态样式推荐插入标签或 CSS 变量。

直接改 `element.style` 只影响行内样式，且优先级高但覆盖范围窄

这是最常用也最容易误解的方式。给元素设置 style 属性，本质是操作 DOM 元素的 style 对象，它只读写 HTML 中的 style 行内属性（如 ），不会触碰 CSS 类、外部样式表或块里的规则。

常见错误：以为 el.style.color = 'blue' 能覆盖掉某个 CSS 类里定义的 color —— 实际上可以，因为行内样式优先级高于类选择器；但反过来，如果那个类用了 !important，那这行 JS 就失效了。


注意点：


style 属性名用驼峰（backgroundColor），不是短横线（background-color）
单位必须显式写出（el.style.width = '200px'），数值型赋值会自动转成像素（el.style.width = 200 → "200px"），但仅限于 width/height 等少数属性，不通用
批量设置建议用 Object.assign(el.style, { opacity: 0.5, transform: 'scale(0.9)' })，比逐行写更安全

切换类名用 classList，别再用 className 拼字符串
element.className 是个字符串，手动增删类容易出错（比如多空格、重复添加、误删其他类）。现代浏览器都支持 element.classList，它是个类数组对象，提供语义化方法：
el.classList.add('active', 'fade-in');
el.classList.remove('disabled');
el.classList.toggle('hidden');
el.classList.contains('error'); // true / false
el.classList.replace('old', 'new');
特别适合状态控制：按钮加载中、菜单展开、表单校验失败等场景。和 CSS 配合时，所有样式逻辑留在 CSS 文件里，JS 只管“是什么状态”，不操心“长什么样”。
兼容性提醒：classList 在 IE10+ 支持，IE9 及以下需用 polyfill 或退回到 className 字符串操作（不推荐）。

读取最终计算样式要用 getComputedStyle()，不是 element.style

element.style 只返回行内样式，而你真正想知道的往往是“这个元素现在实际显示成什么样”——包括继承的、层叠后生效的、甚至浏览器默认样式。这时得用：
const computed = getComputedStyle(el);
console.log(computed.color);        // "rgb(255, 0, 0)"
console.log(computed.fontSize);      // "16px"
console.log(computed.getPropertyValue('border-top-width')); // "1px"
关键细节：

返回的是只读的 CSSStyleDeclaration，不能直接赋值
所有值都是绝对单位（px、rgb()），没有相对单位（em、%、rem）原始值

伪元素也能查，比如 getComputedStyle(el, '::before')

频繁调用可能触发重排（reflow），如需多次读取，先缓存结果

动态加 CSS 规则？用 document.styleSheets 或插入 

运行时生成样式规则（比如主题色切换、暗黑模式、图表配色），有两种主流方式：
方式一：插入新  标签（简单直接，推荐）
const style = document.createElement('style');
style.textContent = `
  .theme-dark .card { background: #222; color: #eee; }
  .theme-dark button:hover { border-color: #444; }
`;
document.head.appendChild(style);
方式二：往已有样式表追加规则（更精细，但有跨域限制）
const sheet = document.styleSheets[0];
sheet.insertRule('.highlight { animation: pulse 2s infinite; }', sheet.cssRules.length);
注意点：

用 insertRule 时，IE 需用 addRule（已废弃），现代项目可忽略
动态样式若依赖 JS 计算（如颜色渐变），建议生成后存在  里，后续替换内容比反复删增标签更高效
服务端渲染（SSR）场景下，动态插入的  可能导致水合（hydration）不一致，需同步服务端输出

最常被忽略的一点：CSS 变量（custom properties）其实是 JS 和 CSS 之间最轻量的桥梁——直接改 document.documentElement.style.setProperty('--primary-color', '#3b82f6')，所有用到该变量的地方实时响应，无需操作 DOM 或样式表。