javascript如何与CSS交互_能动态修改样式吗_技术教程

直接修改element.style仅影响内联样式且需驼峰命名；读取真实样式用getComputedStyle()；批量改样式推荐切换className或classList；CSS变量通过setProperty设置，优先使用语义化类名和属性控制而非硬编码style。

直接改 `element.style` 是最常用也最容易出错的方式

JavaScript 通过 element.style 属性能直接读写内联样式，但只对 HTML 中用 style="..." 写的或 JS 自己设过的值有效。它不反映 CSS 文件或块里定义的规则。

div.style.color = "red" 会生效，且优先级高于外部 CSS（因为属于内联样式）
div.style.backgroundColor 读不到 .box { background-color: blue } 的值，返回空字符串
CSS 属性名要转成驼峰式：font-size → fontSize，z-index → zIndex
设 display: flex 要写 div.style.display = "flex"，不能漏引号

想读真实计算后的样式？用 `getComputedStyle()`

这个函数返回一个只读的 CSSStyleDeclaration 对象，包含元素最终渲染时所有生效的 CSS 属性值（含继承、层叠、媒体查询匹配结果）。

const div = document.querySelector('#myDiv');
const style = getComputedStyle(div);
console.log(style.width);        // "200px"
console.log(style.marginTop);    // "10px"
console.log(style.getPropertyValue('border-radius')); // "4px"

返回值全是字符串，包括数字单位（"16px"、"bold"），没有自动转数字
不能用点语法读自定义属性（--main-color），得用 getPropertyValue('--main-color')
在元素未插入 DOM 时调用会返回空对象（比如刚 document.createElement('div') 后立刻调）

批量改样式更安全：切换 `className` 或操作 `classList`

硬编码一堆 style.xxx = yyy 容易混乱、难维护，也绕过了 CSS 的可复用性和媒体查询能力。推荐用类名控制样式状态。

/* CSS */
.active { opacity: 1; transform: scale(1.05); }
.disabled { opacity: 0.4; pointer-events: none; }

element.className = "active" 会覆盖全部原有类名，慎用
element.classList.add("active")、.remove("disabled")、.toggle("hidden") 更精准
classList.contains("hovered") 可用于条件判断，比查 style.opacity 可靠得多
动态生成类名（如主题色）可配合 document.styleSheets 插入规则，但极少需要

修改 CSS 变量（Custom Properties）影响整片样式树

在根节点（:root）或某个容器上设置 --primary-color，所有用到它的后代样式会自动响应——这是 JS 与 CSS 深度联动的关键接口。

document.documentElement.style.setProperty('--primary-color', '#3b82f6');
// 或作用于局部容器
const card = document.querySelector('.card');
card.style.setProperty('--shadow-size', '8px');

变量名必须带两个短横线前缀，且大小写敏感：--Color ≠ --color

设为 "" 或无效值（如 "invalid"）会导致该变量回退到继承值或初始值
不要在循环中高频调用 setProperty，可能触发多次重排；批量更新建议先 getComputedStyle 判断是否真有变化

改样式本身很简单，难的是判断“该不该改”和“在哪改”。比如动画中频繁改 top/left 会强制同步布局，而用 transform 就走 GPU；又比如暗色模式切换时，直接切 data-theme="dark" 比逐个元素设颜色更健壮。这些细节不在 API 文档里，但在真实项目里天天撞墙。