如何动态加载 CSS 和 JS 文件？

动态加载 CSS 和 JS 文件是一种常见的前端开发技巧，可以极大地提高页面加载效率和用户体验。本文将介绍如何通过 JavaScript 动态加载 CSS 和 JS 文件。

动态加载 CSS 文件

动态加载 CSS 文件可以通过以下两种方式实现：

方式一：使用 DOM 操作动态创建 link 元素

function loadCss(url) {
  var link = document.createElement('link');
  link.rel = 'stylesheet';
  link.type = 'text/css';
  link.href = url;
  document.head.appendChild(link);
}

上述代码中，我们通过 document.createElement 创建了一个 link 元素，然后设置了其 rel、type 和 href 属性，并将其添加到了 head 中。这样就成功地动态加载了一个 CSS 文件。

方式二：使用 XMLHttpRequest 加载并插入 CSS 代码

function loadCss(url) {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', url, true);
  xhr.onload = function () {
    var style = document.createElement('style');
    style.innerHTML = xhr.responseText;
    document.head.appendChild(style);
  };
  xhr.send();
}

上述代码中，我们通过 XMLHttpRequest 加载了指定的 CSS 文件，并通过 document.createElement 创建了一个 style 元素，并将响应的文本插入其中，然后将其添加到了 head 中。

动态加载 JS 文件

动态加载 JS 文件可以通过以下两种方式实现：

方式一：使用 DOM 操作动态创建 script 元素

function loadJs(url) {
  var script = document.createElement('script');
  script.src = url;
  document.body.appendChild(script);
}

上述代码中，我们通过 document.createElement 创建了一个 script 元素，然后设置了其 src 属性，并将其添加到了 body 中。这样就成功地动态加载了一个 JS 文件。

方式二：使用 XMLHttpRequest 加载并执行 JS 代码

function loadJs(url) {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', url, true);
  xhr.onload = function () {
    var script = document.createElement('script');
    script.innerHTML = xhr.responseText;
    document.body.appendChild(script);
  };
  xhr.send();
}

上述代码中，我们通过 XMLHttpRequest 加载了指定的 JS 文件，并通过 document.createElement 创建了一个 script 元素，并插入了响应的文本，然后将其添加到了 body 中。

总结

通过以上介绍，我们知道了如何使用 JavaScript 动态加载 CSS 和 JS 文件，这是前端开发中非常有用的技巧。根据需要选择不同的方式，可以提高页面加载效率和用户体验。