js添加css样式

作者：角落里哭泣发布日期:2025-11-28 浏览:63
// 示例代码：通过 JavaScript 动态添加 CSS 样式

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

// 解释说明：
// 这种方法适用于直接修改单个元素的内联样式。它通过访问元素的 style 属性，然后设置具体的 CSS 属性。

// 方法 2: 使用 classList 操作类名
element.classList.add('newClass');  // 添加一个名为 'newClass' 的类
element.classList.remove('oldClass');  // 移除一个名为 'oldClass' 的类

// 解释说明：
// 通过 classList 可以方便地添加或移除 CSS 类，从而实现样式的切换。这种方法更灵活，适合复用样式。

// 方法 3: 创建并插入新的 <style> 标签
let style = document.createElement('style');
style.innerHTML = `
  .dynamicStyle {
    background-color: yellow;
    padding: 10px;
  }
`;
document.head.appendChild(style);

// 解释说明：
// 通过创建一个新的 <style> 标签并插入到文档的 <head> 中，可以定义全局的 CSS 样式规则。这种方式适用于需要动态生成复杂样式的情况。
上一篇：postcss.config.js
下一篇：c++ 读取json map