JavaScript 改变 HTML 样式

JavaScript 改变 HTML 样式

JavaScript 改变 HTML 样式的核心是通过操作 DOM 元素的 CSS 属性或 类名 实现动态视觉效果。以下是具体方法与场景解析：

---

一、直接修改元素的 style 属性

通过 DOM 元素的 style 属性直接设置内联样式，优先级最高：

// 修改单个样式 
document.getElementById("box").style.color = "blue"; 
 
// 修改多个样式（推荐使用 cssText）
document.getElementById("box").style.cssText = "width: 200px; height: 100px;";

• 适用场景：简单、临时的样式调整（如点击按钮改变颜色）。
• 注意：属性名需使用驼峰写法（如 backgroundColor 而非 background-color）。

---

二、通过类名（className/classList）切换样式

1. className 属性

直接替换元素的类名，适合整体样式切换：

element.className = "new-class"