JavaScript如何操作样式_CSS与JavaScript如何交互

常见错误：以为 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，它是个类数组对象，提供语义化方法：

立即学习“Java免费学习笔记（深入）”；

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 只返回行内样式，而你真正想知道的往往是“这个元素现在实际显示成什么样”——包括继承的、层叠后生效的、甚至浏览器默认样式。这时得用：

动态WEB网站中的PHP和MySQL：直观的QuickPro指南第2版

动态WEB网站中的PHP和MySQL详细反映实际程序的需求，仔细地探讨外部数据的验证(例如信用卡卡号的格式)、用户登录以及如何使用模板建立网页的标准外观。动态WEB网站中的PHP和MySQL的内容不仅仅是这些。书中还提到如何串联JavaScript与PHP让用户操作时更快、更方便。还有正确处理用户输入错误的方法，让网站看起来更专业。另外还引入大量来自PEAR外挂函数库的强大功能，对常用的、强大的包

下载

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 或样式表。