JavaScript 是一种用于操作网页的脚本语言，它可以用来修改 HTML 元素的属性和内容，也可以直接修改 CSS 样式，在本文中，我们将介绍如何使用 JavaScript 来修改 CSS 样式。
1、通过 style 属性修改样式
最简单的方式是通过元素的 style 属性来直接修改样式，我们有一个 id 为 "myDiv" 的 div 元素，我们想要改变它的背景颜色和字体大小，可以这样做：
var myDiv = document.getElementById("myDiv");
myDiv.style.backgroundColor = "red";
myDiv.style.fontSize = "20px";
这种方式的缺点是每次修改都需要获取元素，然后设置其 style 属性，如果需要频繁修改同一个元素的样式，这种方式可能会比较繁琐。
2、通过修改 class 名来切换样式
另一种常见的方式是通过修改元素的 class 名来切换不同的 CSS 样式，我们需要定义好对应的 CSS 样式：
.red-bg {
background-color: red;
}
.big-font {
font-size: 20px;
}
我们可以使用 JavaScript 来修改元素的 class 名：
var myDiv = document.getElementById("myDiv");
myDiv.classList.add("red-bg"); // 添加红色背景样式
myDiv.classList.add("big-font"); // 添加大字体样式
这种方式的优点是可以通过修改 class 名来切换不同的样式，而不需要每次都重新设置 style 属性，这种方式也更符合面向对象的思想，每个 class 对应一种样式，更加清晰易懂。
3、通过修改 styleSheet 对象来修改样式
除了直接修改元素的 style 属性和 class 名，我们还可以通过修改 styleSheet 对象来修改样式，我们需要获取到对应的 styleSheet 对象：
var myStyleSheet = document.styleSheets[0]; // 获取第一个 styleSheet 对象
我们可以使用 insertRule 方法来插入新的样式规则：
myStyleSheet.insertRule("#myDiv { background-color: red; }", myStyleSheet.cssRules.length); // 插入红色背景样式规则
myStyleSheet.insertRule("#myDiv { font-size: 20px; }", myStyleSheet.cssRules.length); // 插入大字体样式规则
这种方式的优点是可以一次性插入多个样式规则，而不需要分别设置每个样式，这种方式也更加灵活，可以随时插入、删除和修改样式规则，这种方式的缺点是需要获取到对应的 styleSheet 对象，并且需要知道具体的样式规则。
以上就是使用 JavaScript 修改 CSS 样式的三种常见方式，每种方式都有其优点和缺点，具体使用哪种方式取决于实际需求和个人喜好，在实际开发中，我们可以根据需要灵活选择和使用这些方式。