在前端开发中，使用JavaScript动态调整CSS样式是常见的需求。通过这种方式，可以实现更灵活的页面交互效果。以下是几种主流的实现方法：

🌟 第一种：直接操作元素的style属性

这是最简单的方式，可以直接为某个HTML元素添加内联样式。例如：

```javascript

document.getElementById('myElement').style.color = 'blue';

```

这种方法适合快速修改单一属性，但不太适合复杂的样式管理。

💡 第二种：使用classList操作类名

通过`classList`方法，可以轻松地添加或移除类名，从而间接改变样式。比如：

```javascript

document.querySelector('.box').classList.add('active');

```

这种方式更符合语义化编程，也便于维护。

💪 第三种：动态创建并插入CSS规则

如果需要全局生效的样式，可以通过JavaScript动态创建`