CSS 使用JavaScript动态加载CSS文件并使用回调函数，无需使用jQuery

在本文中，我们将介绍如何使用纯JavaScript动态加载CSS文件，并在加载完成后执行回调函数的方法，而不需要依赖于jQuery。

阅读更多：CSS 教程

加载CSS文件的方法

要动态加载CSS文件，我们需要使用JavaScript来创建link元素，并将其插入到文档中。通过link元素的href属性来指定要加载的CSS文件的URL。

以下是一个示例代码，演示了如何使用JavaScript动态加载CSS文件：

function loadCSS(url, callback) {
  var link = document.createElement("link");
  link.type = "text/css";
  link.rel = "stylesheet";
  link.href = url;

  if (callback && typeof callback === "function") {
    link.onload = callback;
  }

  document.head.appendChild(link);
}

// 调用示例：
loadCSS("styles.css", function() {
  console.log("CSS文件已加载完成");
});

在上面的代码中，loadCSS函数接受两个参数，url是要加载的CSS文件的URL，callback是加载完成后要执行的回调函数。在函数内部，我们使用document.createElement创建了一个link元素，并设置了其type、rel和href属性。然后，通过将新创建的link元素插入到head元素中，来开始加载CSS文件。

如果提供了回调函数，我们还将设置link元素的onload事件处理程序，以在CSS文件加载完成后执行回调函数。这样，我们可以确保在CSS文件加载完成后再执行其他操作。

示例

假设我们有一个名为styles.css的CSS文件，内容如下：

body {
  background-color: yellow;
}

h1 {
  color: blue;
}

我们可以使用上述loadCSS函数来加载这个CSS文件，并在加载完成后执行一些代码。例如，我们可以在页面加载完成后，动态加载CSS文件，并修改页面上的元素样式：

window.addEventListener("DOMContentLoaded", function() {
  loadCSS("styles.css", function() {
    document.body.classList.add("custom-style");
    document.querySelector("h1").style.fontWeight = "bold";
  });
});

在上面的示例中，我们通过loadCSS函数加载了styles.css文件，并在加载完成后执行了回调函数。在回调函数中，我们使用classList.add方法给body元素添加了一个名为custom-style的自定义类，以应用styles.css中定义的样式。此外，我们还使用querySelector方法选择了页面上的第一个h1元素，并通过修改style属性来改变其字体的加粗。

通过这种方式，我们可以根据需要动态加载CSS文件，并在加载完成后执行一些操作，从而实现更灵活的样式控制。

总结

在本文中，我们介绍了如何使用纯JavaScript动态加载CSS文件，并在加载完成后执行回调函数的方法，而不需要使用jQuery。通过创建link元素并将其插入到文档中，我们可以加载外部CSS文件，并通过在加载完成后执行回调函数来实现更灵活的样式控制。希望本文对你了解如何动态加载CSS文件和使用回调函数有所帮助。