JS函数实现动态添加CSS样式表文件

下面是JS函数实现动态添加CSS样式表文件的完整攻略。

一、基本原理

在 HTML 中，我们可以使用 link 标签引入 CSS 样式表，例如：

<link rel="stylesheet" type="text/css" href="style.css">

但是如果我们想要动态地添加 CSS 样式表文件，就需要使用 JavaScript 来实现了。

在 JavaScript 中，我们可以使用 document.createElement('link') 方法来创建 link 元素，并设置 rel、type、href 等属性，最后将 link 元素添加到 head 标签中即可实现动态添加 CSS 样式表文件。

二、示例说明

以下是两个添加 CSS 样式表文件的示例：

1.在 head 标签中添加一个 CSS 样式表文件

function addCSSFile(filename) {
  var head = document.getElementsByTagName('head')[0];
  var link = document.createElement('link');
  link.setAttribute('rel', 'stylesheet');
  link.setAttribute('type', 'text/css');
  link.setAttribute('href', filename);
  head.appendChild(link);
}

// 使用示例
addCSSFile('style.css');

2.在 body 标签中添加一个 CSS 样式表文件

function addCSSFileInBody(filename) {
  var body = document.getElementsByTagName('body')[0];
  var link = document.createElement('link');
  link.setAttribute('rel', 'stylesheet');
  link.setAttribute('type', 'text/css');
  link.setAttribute('href', filename);
  body.appendChild(link);
}

// 使用示例
addCSSFileInBody('style.css');

以上两个示例中，都定义了一个函数来创建 link 元素，并将其添加到 head 或 body 标签中。在调用函数时，只需要传入需要添加的 CSS 样式表文件名即可。

需要注意的是，在将 link 元素添加到 head 或 body 标签中前，一定要先获取到 head 或 body 元素的引用。如果在获取 head 或 body 元素的过程中获取不到，则添加 link 元素的操作将会失败。

三、总结

以上就是 JS 函数实现动态添加 CSS 样式表文件的完整攻略。通过 JavaScript 的 createElement 方法以及 setAttribute 方法，我们可以轻松地实现动态添加 CSS 样式表文件的功能，并且可以根据需要将 link 元素添加到 head 或 body 标签中。