CSS选择器与JS联动调样式方法

本文深入解析了CSS选择器与JavaScript联动修改样式的实用技巧与最佳实践，涵盖从基础的`querySelector`定位与`style`属性操作，到更健壮的`classList`类名切换、动态注入样式规则的`insertRule`，再到精准获取和监听真实渲染样式的`getComputedStyle`与`MutationObserver`；强调在追求开发效率的同时，应优先选择可维护、可复用、不破坏CSS优先级的设计方式——不是所有能改样式的方法都该被使用，而是在不同场景中明智地选择最合适的那一条路径。

用 document.querySelector 找元素再改 style 属性

这是最直接的方式：先用 CSS 选择器定位元素，再通过 JS 修改其内联样式。注意它只影响 style 属性，不改变 CSS 类或外部样式表。

• document.querySelector 只返回第一个匹配元素；要批量操作，用 document.querySelectorAll 配合 forEach
• 修改单个样式时，用 element.style.propertyName = "value"，属性名是驼峰式（如 backgroundColor），不是短横线（background-color）
• 设置 display: none 时，别写成 element.style.display = "none" 后又期望用 getComputedStyle 读取原始值——内联样式优先级更高，会覆盖 CSS 文件里的定义

const btn = document.querySelector('button.primary');
btn.style.backgroundColor = '#007bff';
btn.style.borderRadius = '4px';

用 classList 切换预设的 CSS 类更安全

比起硬编码样式值，通过增删 class 来控制样式更易维护、可复用，也避免内联样式污染和优先级混乱。

• element.classList.add('active')、.remove('disabled')、.toggle('hidden') 是最常用方法
• 多个类可一次性传入：el.classList.add('a', 'b', 'c')
• 判断是否存在某类用 el.classList.contains('loading')，比解析 className 字符串可靠
• 注意：如果 CSS 类里用了 !important，JS 用 style 直接赋值可能被忽略；而 classList 不受此影响，因为它只是开关类名

const card = document.querySelector('.card[data-id="123"]');
card.classList.toggle('expanded');

动态生成样式规则要用 CSSStyleSheet.insertRule

当需要运行时注入整套规则（比如主题色切换、响应式断点适配），不能只靠改单个元素样式，得操作样式表本身。

• 必须先获取一个 CSSStyleSheet 对象，通常从 document.styleSheets[0] 或新建