使用 JavaScript 动态设置 CSS 样式

使用 JavaScript 动态设置 CSS 样式

---

在前端开发中，很多时候我们需要根据用户的操作、页面的状态或者其他动态因素来改变元素的样式。这时，使用 JavaScript 动态设置 CSS 样式就显得尤为重要。本教程将详细介绍如何使用 JavaScript 来动态改变元素的 CSS 样式。

一、理论基础

1.1 三种主要的方式

在 JavaScript 中，有三种主要的方式可以动态设置 CSS 样式：

1. 直接操作元素的 style 属性：这是最直接的方式，通过 JavaScript 直接修改元素的内联样式。
2. 修改元素的 classList 属性：通过添加、移除或切换元素的 CSS 类来改变样式。
3. 修改