Javascript 添加 CSS 文件

在前端开发中，我们经常需要通过 Javascript 动态地添加样式表。下面是添加 CSS 文件的方法。

方法一：使用 link 标签

我们可以在 Javascript 代码中创建一个 link 标签，然后将其添加到页面中的 head 元素中。这个 link 标签的 href 属性指向我们要添加的样式表地址，rel 属性必须为 "stylesheet"。

// 创建 link 标签并设置属性
var link = document.createElement('link');
link.setAttribute('rel', 'stylesheet');
link.setAttribute('type', 'text/css');
link.setAttribute('href', 'path/to/your/css/file.css');

// 将 link 标签添加到 head 元素中
document.head.appendChild(link);

方法二：使用 @import

我们还可以使用 @import 声明导入 CSS 文件，然后将整个规则集添加到页面中的 style 元素中。这种方法只适用于添加单个规则集。

// 创建 style 标签并设置属性
var style = document.createElement('style');
style.type = 'text/css';

// 设置 @import 规则
var importRule = '@import url("path/to/your/css/file.css");';
style.appendChild(document.createTextNode(importRule));

// 将 style 标签添加到 head 元素中
document.head.appendChild(style);

方法三：使用 XHR 加载 CSS 文件

我们也可以使用 XHR（XMLHttpRequest）对象加载 CSS 文件，然后将其添加到页面中的 style 元素中。这个方法比较繁琐，但比较灵活，我们可以在遵循同源策略的前提下任意地加载 CSS 文件。

// 创建 XHR 对象
var xhr = new XMLHttpRequest();

// 订阅 onload 事件
xhr.onload = function() {
  if (xhr.status === 200) {
    // 创建 style 标签并设置属性
    var style = document.createElement('style');
    style.type = 'text/css';

    // 添加 CSS 文件内容到 style 元素中
    style.appendChild(document.createTextNode(xhr.responseText));

    // 将 style 标签添加到 head 元素中
    document.head.appendChild(style);
  }
};

// 加载 CSS 文件
xhr.open('GET', 'path/to/your/css/file.css', true);
xhr.send();

以上是添加 CSS 文件的三种方法，每种方法都有其适用场景。根据实际需求选择合适的方法即可。