在日常的前端开发中，我们经常需要动态地改变网页元素的样式。下面将介绍四种使用JavaScript来修改CSS样式的常见方法 🎨：

🌈 方法一：直接修改style属性

最简单的方法是直接通过元素的`style`属性来修改样式。例如，如果你想改变一个按钮的颜色，可以这样写：

```javascript

document.getElementById('myButton').style.backgroundColor = 'red';

```

🌈 方法二：添加或移除类名

你可以通过`classList.add()`和`classList.remove()`来动态添加或删除类名。这种方法的好处是可以在CSS文件中预先定义好样式。

```javascript

document.getElementById('myDiv').classList.add('highlight');

```

🌈 方法三：使用`.setAttribute()`

这个方法允许你修改HTML标签上的任何属性，包括样式属性。这在某些场景下会非常有用。

```javascript

document.getElementById('myImage').setAttribute('style', 'width: 100px;');

```

🌈 方法四：利用`insertRule()`添加CSS规则

如果你想要更灵活地管理样式，可以考虑使用`insertRule()`来动态添加CSS规则到样式表中。

```javascript

let sheet = document.styleSheets[0];

sheet.insertRule('myElement { color: blue; }', 0);

```

希望这些方法能帮助你在项目中更加灵活地运用JavaScript来修改CSS！🚀