js 添加css

作者：幸福的起点发布日期:2025-09-04 浏览:70

// 方法一：通过创建 <style> 标签并添加 CSS 规则

// 创建一个 <style> 元素
let style = document.createElement('style');

// 定义要添加的 CSS 规则
style.innerHTML = `
  body {
    background-color: lightblue;
  }
  h1 {
    color: darkblue;
  }
`;

// 将 <style> 元素添加到文档的 <head> 中
document.head.appendChild(style);

// 方法二：通过操作元素的 style 属性

// 获取要修改样式的元素
let element = document.getElementById('myElement');

// 直接设置内联样式
element.style.color = 'red';
element.style.fontSize = '20px';

// 方法三：通过 classList 操作类名（前提是已有定义好的 CSS 类）

// 获取要修改样式的元素
let myDiv = document.querySelector('.my-div');

// 添加或移除类名
myDiv.classList.add('highlight');  // 添加类
myDiv.classList.remove('normal');  // 移除类

解释说明：

方法一：通过创建 <style> 标签并将其插入到文档的 <head> 中，可以动态地为整个页面添加全局的 CSS 样式。
方法二：通过直接操作 DOM 元素的 style 属性，可以为特定的元素添加内联样式。这种方式适用于需要对单个元素进行样式调整的情况。
方法三：通过 classList 操作元素的类名，可以方便地添加或移除预定义的 CSS 类，从而实现样式的切换。

上一篇：js scale

下一篇：js display