通过js修改css样式

在JavaScript中，可以通过多种方式修改CSS样式。以下是一些常用的方法：

1. 通过DOM元素的style属性直接设置样式：

document.getElementById("myElement").style.color = "blue";
document.getElementById("myElement").style.backgroundColor = "yellow";

2. 使用classList添加、删除或切换CSS类：

// 添加一个类
document.getElementById("myElement").classList.add("myClass");
 
// 删除一个类
document.getElementById("myElement").classList.remove("myClass");
 
// 切换一个类
document.getElementById("myElement").classList.toggle("myClass");

3. 使用setAttribute设置style属性：

document.getElementById("myElement").setAttribute("style", "color: blue; background-color: yellow;");

4. 使用CSSOM（CSS Object Model）接口修改样式：

// 获取或创建一个样式表
var style = document.styleSheets[0];
 
// 在样式表中插入新的规则
style.insertRule('#myElement { color: blue; background-color: yellow; }', style.cssRules.length);

5. 使用cssText一次性设置多个样式：

document.getElementById("myElement").style.cssText = "color: blue; background-color: yellow;";

选择哪种方法取决于具体需求和场景。直接修改style属性适合临时样式改变，而使用CSS类或样式表更适合结构、样式分离，并且有助于代码的维护。