2.3 样式与类名操作体系样式与类名操作是前端实现视觉交互的核心手段通过 JavaScript 动态控制元素的样式属性与类名状态可以实现状态反馈、动画过渡、布局调整等丰富的交互效果。样式操作分为行内样式直接操作、类名切换控制两类写入方式以及计算样式读取的读取方式不同方式在优先级、性能、可维护性上存在显著差异合理选型是保证交互体验与代码可维护性的关键。2.3.1 行内样式操作通过元素的style属性可以直接读写元素的行内样式操作的是 HTML 标签上的style属性优先级高于外部样式表适合动态计算样式、即时视觉反馈的场景。一、基础读写语法element.style是一个CSSStyleDeclaration对象样式属性采用驼峰命名法对应 CSS 属性通过点语法直接赋值。const box document.querySelector(.box); // 设置单个样式 box.style.width 200px; box.style.backgroundColor #f0f0f0; box.style.marginTop 20px; // 读取行内样式 console.log(box.style.width); // 200px命名规则CSS 中带横杠的属性如background-color转为 JS 驼峰命名backgroundColorfloat因是保留字对应cssFloat。二、批量操作cssText通过style.cssText可以批量设置行内样式直接写入完整的 CSS 字符串适合一次性设置多个样式。// 批量设置会覆盖原有所有行内样式 box.style.cssText width: 200px; height: 100px; color: #333; border: 1px solid #eee;; // 追加样式不覆盖 box.style.cssText ; padding: 10px;;三、标准方法操作方法作用示例setProperty(property, value)设置指定样式属性支持原生横杠属性名box.style.setProperty(border-radius, 8px)getPropertyValue(property)获取指定样式属性值box.style.getPropertyValue(width)removeProperty(property)移除指定样式属性box.style.removeProperty(margin-top)方法形式无需转换驼峰命名适合属性名动态生成的场景。四、核心特点与边界优先级最高行内样式优先级高于类选择器、ID 选择器样式仅低于!important作用范围有限element.style只能读取和写入行内样式无法获取样式表中定义的样式性能特点单一样式修改性能高大量连续修改会触发多次重排建议批量合并操作单位要求数值型样式必须带单位除了0、z-index、opacity等特殊属性否则样式不生效2.3.2 classList 完整能力classList是元素的类名专属操作 API提供了增删改查、切换等语义化方法替代了传统拼接className字符串的繁琐方式是状态类样式控制的推荐方案。一、核心 API 与示例element.classList返回一个DOMTokenList集合包含元素的所有类名支持以下核心方法方法作用示例add(class1, class2, ...)添加一个或多个类名已存在则自动忽略box.classList.add(active, shadow)remove(class1, class2, ...)移除一个或多个类名box.classList.remove(active)toggle(className, force?)切换类名有则移除无则添加可选 force 参数强制添加 / 移除box.classList.toggle(open)contains(className)判断是否包含指定类名返回布尔值box.classList.contains(active)replace(oldClass, newClass)替换类名旧类存在才生效box.classList.replace(normal, highlight)item(index)根据索引返回对应类名box.classList.item(0)基础示例状态切换const btn document.querySelector(.toggle-btn); const panel document.querySelector(.panel); btn.addEventListener(click, () { // 切换展开收起状态 panel.classList.toggle(collapsed); // 同步按钮文本 btn.textContent panel.classList.contains(collapsed) ? 展开 : 收起; });二、强制切换参数toggle的第二个参数force为布尔值为true时强制添加为false时强制移除返回值为最终是否包含该类名。// 传统条件判断写法 if (isActive) { box.classList.add(active); } else { box.classList.remove(active); } // 等价于 toggle 强制写法 box.classList.toggle(active, isActive);三、优势对比vs 传统 className对比维度className字符串操作classList API增删操作需要字符串拼接、正则匹配易出错语义化方法直接操作简洁可靠重复处理容易出现重复类名、多余空格自动去重自动处理空格切换判断需要先判断再拼接代码冗余原生 toggle 方法一行完成逻辑多类操作拼接繁琐易覆盖原有类名支持同时传入多个类名参数四、适用场景交互状态切换激活、悬停、展开、加载中等状态类控制主题切换深色模式、多种皮肤切换动画触发通过添加 / 移除类名触发 CSS 过渡与动画2.3.3 计算样式读取window.getComputedStyle()用于获取元素最终生效的计算样式包含行内样式、样式表样式、继承样式全部叠加后的最终结果是只读的样式信息用于获取元素实际渲染的样式值。一、基础语法const style window.getComputedStyle(element, pseudoElement?);element目标元素pseudoElement可选伪元素字符串如::before、::after用于读取伪元素样式返回值CSSStyleDeclaration只读对象通过属性名或getPropertyValue()获取值基础示例const box document.querySelector(.box); const computedStyle window.getComputedStyle(box); // 获取最终生效的宽度 console.log(computedStyle.width); // 200px // 获取最终背景色 console.log(computedStyle.backgroundColor); // rgb(240, 240, 240)二、伪元素样式读取通过第二个参数可以读取伪元素的计算样式这是唯一能获取伪元素样式的方式。const beforeStyle window.getComputedStyle(box, ::before); console.log(beforeStyle.content); // 获取伪元素内容三、核心特点只读不可写返回的是样式快照无法通过修改该对象直接改变元素样式修改样式仍需通过style或classList值为计算后结果尺寸类返回实际像素值如width返回最终渲染的像素宽度而非百分比、auto颜色统一转为rgb()或rgba()格式相对单位em、rem都会转换为实际像素值包含全部样式来源整合浏览器默认样式、外部样式表、内部样式、行内样式的最终结果四、与 element.style 的区别对比项element.stylegetComputedStyle读写性可读写只读样式来源仅行内样式所有来源最终计算结果值类型写入值原样返回可能是相对单位计算后的绝对值统一像素等标准单位核心用途设置行内样式获取元素实际渲染样式五、常见使用场景获取元素实际尺寸与位置用于布局计算判断元素实际生效的样式状态读取伪元素的样式与内容调试样式问题查看最终生效的样式值