推荐优先使用classList管理类名、style对象设置行内样式；classList提供add/remove/toggle/contains/replace等方法，避免覆盖原有类；style属性需驼峰命名且值为带单位字符串，批量样式用Object.assign，动态计算样式才直接操作style。

JavaScript 中修改已有元素的类名和行内样式，主要通过操作元素的 className、classList 和 style 属性来实现。推荐优先使用 classList 管理类名，用 style 对象设置行内样式，既安全又语义清晰。

修改类名：用 classList 更可靠

className 虽然能直接赋值字符串，但会覆盖全部原有类；而 classList 提供了增删查切等方法，避免误删其他类名。

• 添加类名：elem.classList.add('active', 'highlight')
• 删除类名：elem.classList.remove('disabled')
• 切换类名（有则删，无则加）：elem.classList.toggle('hidden')
• 检查是否包含某类：elem.classList.contains('error') → 返回布尔值
• 替换类名：elem.classList.replace('old', 'new')（现代浏览器支持）

设置行内样式：用 style 对象逐项赋值

elem.style 是一个 CSSStyleDeclaration 对象，属性名采用驼峰写法（如 backgroundColor），值必须是字符串（带单位）。

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

• 单个样式：elem.style.color = '#333'、elem.style.fontSize = '16px'
• 多个样式：可封装为函数或循环赋值，例如：
  Object.assign(elem.style, { opacity: '0.8', transform: 'scale(1.05)' })
• 注意：不能用 elem.style = 'color: red; font-size: 14px'，这会清空原有行内样式且不生效

批量更新类名和样式的小技巧

若需同时改类名和样式，建议先用 classList 控制状态，再用 CSS 类定义样式，而非堆砌行内样式——更易维护、支持 CSS 过渡和媒体查询。

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

• 例如：用 elem.classList.toggle('loading')，然后在 CSS 中写 .loading { opacity: 0.6; pointer-events: none; }
• 仅当样式动态依赖 JS 计算（如位置、尺寸）时，才用 style 直接设置
• 避免频繁读写 style（触发重排），可先计算好再一次性赋值

兼容性与注意事项

现代项目基本可放心使用 classList（IE10+）和驼峰式 style 写法。若需支持 IE9，classList 需 polyfill，或退回到 className 字符串操作（需手动 split/join）。

• 设置 float 用 cssFloat（IE）或 styleFloat（老版 IE），现代浏览器统一用 cssFloat
• 设置自定义属性（如 --primary-color）用 elem.style.setProperty('--primary-color', '#007bff')
• 读取计算后样式（含 CSS 文件定义的）用 getComputedStyle(elem).color