js 设置css

// 使用 JavaScript 设置 CSS 样式

// 方法一：直接操作元素的 style 属性
let element = document.getElementById('myElement');
element.style.color = 'red';  // 设置文本颜色为红色
element.style.fontSize = '20px';  // 设置字体大小为 20px

// 方法二：使用 classList 操作类名
let element2 = document.getElementById('myElement2');
element2.classList.add('newClass');  // 添加一个类
element2.classList.remove('oldClass');  // 移除一个类

// 方法三：使用 setAttribute 修改整个 style 属性
let element3 = document.getElementById('myElement3');
element3.setAttribute('style', 'color: blue; font-size: 18px;');  // 设置多个样式

// 方法四：使用 CSSStyleSheet 插入新的样式规则
let sheet = document.createElement('style');
sheet.innerHTML = ".myClass { color: green; }";
document.head.appendChild(sheet);  // 动态插入一个新的样式规则

解释说明：

1. 方法一 是最直接的方式，通过修改元素的 style 属性来设置内联样式。
2. 方法二 通过操作元素的 classList 来添加或移除类，从而应用或移除 CSS 类中的样式。
3. 方法三 使用 setAttribute 来一次性设置多个样式属性。
4. 方法四 动态创建并插入新的样式规则，适用于需要全局应用样式的场景。