修改元素类名推荐用classlist（如add、remove、toggle），行内样式通过style属性设置（驼峰命名，需带单位）；避免直接赋值classname或滥用style，优先用css类控制样式。

修改元素的类名和行内样式是 DOM 操作中最常用的操作之一，核心在于准确获取元素后，通过标准属性或方法更新其 className、classList 或 style。

修改类名：推荐用 classList（安全、灵活）

classList 是现代浏览器的标准 API，支持增删查切换单个或多个类，不会误删其他类，比直接操作 className 更可靠。

• 添加类：elem.classList.add('active', 'highlight')
• 删除类：elem.classList.remove('disabled')
• 切换类（有则删，无则加）：elem.classList.toggle('hidden')
• 检查是否含有某类：elem.classList.contains('error') → 返回布尔值
• 替换类：elem.classList.replace('old', 'new')
• 一次性设为指定类（清空再设）：elem.className = 'btn btn-primary'（不推荐频繁用，会覆盖全部）

修改行内样式：直接操作 style 属性

elem.style 是一个 CSSStyleDeclaration 对象，对应 HTML 中的 style 属性。只能设置行内样式，且属性名需用驼峰写法（如 backgroundColor），不能写成短横线形式（background-color 不合法）。

Alibabacloud Sdk Client Initialization For Java

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

下载

• 单个样式赋值：elem.style.color = '#333'; elem.style.fontSize = '14px';
• 批量设置（推荐用 CSS 变量或 class 替代）：
  Object.assign(elem.style, { opacity: '0.8', transform: 'scale(0.95)' });
• 移除某个行内样式：elem.style.removeProperty('display');
• 注意：通过 style 设置的样式优先级高于外部 CSS，但无法读取计算后样式（如 elem.style.height 只返回行内值，非实际高度）；要读取真实样式，请用 getComputedStyle(elem).height

常见误区提醒

• className 是字符串，直接赋值会**完全覆盖**原有类名，容易出错；classList 才是面向类的操作首选。
• style 只影响行内样式，不影响 class 或外部 CSS；想持久控制样式，优先改 class，而非硬写 style。
• 动态添加带单位的数值（如 px、%）时别漏写单位：elem.style.width = '200px'，写成 200 无效。
• 设置 float 要用 cssFloat（Firefox）或 styleFloat（旧 IE），现代开发中建议用 cssText 或 class 避开兼容问题。

小技巧：用 dataset + class 配合实现状态管理

比如切换按钮状态时，与其反复操作多个 style 属性，不如定义好 CSS 类：

.btn--loading { opacity: 0.7; pointer-events: none; }
.btn--success { background: #4CAF50; color: white; }

然后 JS 只需：

• button.classList.add('btn--loading');
• button.classList.replace('btn--loading', 'btn--success');

这样逻辑清晰、样式可维护、性能也更好。

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南