CSS 文件操作入门：巧用 CSSOM 化腐朽为神奇

2023-11-15 15:33:20

前言：告别行内样式，拥抱 CSSOM 的强大

在 Web 开发的浩瀚世界中，样式表（CSS）扮演着至关重要的角色，赋予我们的网页以视觉生命力。然而，传统的样式操作方法局限于直接修改 DOM 元素的 style 属性，即所谓的行内样式。这种方式虽然简单易行，但缺乏灵活性，难以满足复杂动态需求。

为了打破这些枷锁，我们亟需一种更加强大的武器——CSSOM（Cascading Style Sheets Object Model，层叠样式表对象模型）。它允许我们直接操作 CSS 文件中的样式规则，为 Web 开发赋予了无限可能。

CSSOM：操纵样式表的利器

CSSOM 是一个 JavaScript API，提供了对 CSS 样式表的编程访问。它将 CSS 文件中的规则表示为一个对象模型，允许我们通过 JavaScript 动态地添加、修改和删除样式。

使用 CSSOM，我们不再受制于行内样式的限制，可以轻松实现：

根据用户交互或特定条件动态修改页面样式
加载额外的 CSS 文件或样式表
操纵媒体查询，响应不同屏幕尺寸
创建和修改动画效果

操作 CSSOM 的实战技巧

1. 获取样式表

const styleSheets = document.styleSheets;

2. 遍历样式表规则

for (let i = 0; i < styleSheets.length; i++) {
  const rules = styleSheets[i].rules;
  for (let j = 0; j < rules.length; j++) {
    console.log(rules[j]);
  }
}

3. 添加样式规则

const newRule = `body { background-color: red; }`;
styleSheets[0].insertRule(newRule, 0);

4. 修改样式规则

const rule = styleSheets[0].rules[0];
rule.style.color = 'blue';

5. 删除样式规则

styleSheets[0].deleteRule(0);

实例：用 CSSOM 实现夜间模式

想象这样一个场景：当你打开网页时，它亮得让你睁不开眼。为了保护用户的视力，我们可以使用 CSSOM 创建一个夜间模式开关，一键切换网页为深色主题。

const nightModeSwitch = document.getElementById('night-mode-switch');

nightModeSwitch.addEventListener('click', () => {
  const newRule = `body { background-color: black; color: white; }`;
  styleSheets[0].insertRule(newRule, 0);
});