JavaScript修改元素属性和样式需先获取元素：用setAttribute/getAttribute操作HTML属性（含自定义data-*），点语法直接赋值标准DOM属性；style设内联样式（驼峰命名、带单位），classList动态管理CSS类更安全高效。
JavaScript 通过 DOM 操作修改元素属性和样式，核心是先获取目标元素，再用对应 API 设置或更新值。关键在于区分“HTML 属性”（setAttribute / getAttribute）和“DOM 属性”（点语法如 el.id、el.className），以及内联样式（style）与 CSS 类（className 或 classList）的不同操作方式。
修改 HTML 属性（如 src、href、disabled）
使用 setAttribute() 和 getAttribute() 操作标准或自定义属性；对布尔属性（如 disabled、checked），设为字符串 "disabled" 即生效，设为空字符串或 null 可移除。
-
el.setAttribute("src", "new-image.jpg")—— 更新图片地址 -
el.setAttribute("data-id", "123")—— 添加/更新自定义 data 属性 -
el.removeAttribute("disabled")—— 移除禁用状态 - 直接赋值更简洁：
el.disabled = false（推荐用于标准布尔属性）
修改元素内容与结构属性
文本内容用 textContent（安全，不解析 HTML）或 innerHTML（可插入 HTML，但需防 XSS）；结构类属性如 id、className 可直接点语法修改。
-
el.textContent = "新文字"—— 替换纯文本 -
el.innerHTML = "加粗内容"—— 插入 HTML 片段 -
el.id = "newId"、el.className = "btn btn-primary" - 注意：
className会覆盖全部 class，建议优先用classList
动态控制 CSS 样式（内联 style）
通过 element.style 设置内联样式，属性名用驼峰写法（如 backgroundColor），值必须带单位（如 "20px"、"#ff0"）。
el.style.color = "#333"el.style.fontSize = "16px"-
el.style.display = "none"—— 隐藏元素 - 清空某样式：
el.style.removeProperty("opacity")
增删改 CSS 类（推荐方式）
用 classList 精准管理 class，避免字符串拼接错误，支持添加、删除、切换、检查等操作，语义清晰且性能好。
-
el.classList.add("active", "highlight")—— 添加一个或多个类 -
el.classList.remove("disabled")—— 移除指定类 -
el.classList.toggle("hidden")—— 有则删、无则加 -
el.classList.contains("error")—— 判断是否含某类 -
el.classList.replace("old", "new")—— 替换类（现代浏览器支持）
实际开发中，优先用 classList 控制样式开关，用 dataset 存取结构化数据，仅在需要运行时计算样式（如动画偏移）时才操作 style。属性修改后无需手动“刷新”，DOM 会立即响应并重绘。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
