js 修改css

// 通过 JavaScript 修改 CSS 样式

// 示例 1: 直接修改元素的 style 属性
let element = document.getElementById("myElement");
element.style.color = "red";  // 将元素的文字颜色设置为红色
element.style.fontSize = "20px";  // 设置字体大小为 20px

// 示例 2: 使用 classList 方法添加或移除类
element.classList.add("newClass");  // 添加一个名为 "newClass" 的类
element.classList.remove("oldClass");  // 移除一个名为 "oldClass" 的类

// 示例 3: 修改元素的内联样式表
let styleSheet = document.styleSheets[0];  // 获取第一个样式表
styleSheet.insertRule("#myElement { color: blue; }", styleSheet.cssRules.length);  // 插入新的规则

// 示例 4: 使用 setAttribute 修改整个 style 属性
element.setAttribute("style", "color: green; font-size: 24px;");  // 修改整个 style 属性

// 示例 5: 使用 getComputedStyle 获取和修改计算后的样式
let computedStyle = window.getComputedStyle(element);
console.log(computedStyle.color);  // 输出当前元素的颜色
element.style.color = "purple";  // 修改颜色

解释说明：

1. 直接修改 style 属性：可以通过 element.style 直接访问和修改元素的内联样式。
2. 使用 classList：可以方便地添加、移除或切换类，从而改变元素的样式。
3. 修改样式表：可以通过 insertRule 方法动态插入新的 CSS 规则到现有的样式表中。
4. 使用 setAttribute：可以直接设置整个 style 属性的内容。
5. 获取计算后的样式：getComputedStyle 可以获取元素的最终样式，并允许你基于这些样式进行进一步的操作。