在 Web 前端开发中，我们经常需要动态地加载外部的 CSS 文件，以实现一些特定的功能和效果。本文将介绍如何使用原生 JavaScript，即不依赖于 jQuery 等第三方库，来实现动态加载 CSS 文件，并且加上回调函数。
实现思路
- 创建一个
link标签，并设置其href属性为需要加载的 CSS 文件路径。 - 将该标签添加到
head元素中，此时 CSS 文件将被下载但未应用到页面。 - 创建一个回调函数，在 CSS 文件加载完成后执行，以确保 CSS 文件被正确地加载完毕并可以被引用。
代码实现
-- -------------------- ---- -------
-------- ------------ --------- -
----- ---- - -------------------------------
------------------------ --------------
------------------------- ------------
------------------------- -----
--------------------------------
--- --- - ------------------------------
----------- - ---------- -
-- --------- -- ------ -------- --- ----------- -
-----------
-
--
------- - ----
-上述代码中，loadCSS 函数接收两个参数：url 表示需要加载的 CSS 文件路径，callback 表示回调函数。首先创建一个 link 标签，设置其属性，并将其添加到 head 元素中。接着创建一个 img 标签，并监听其 onerror 事件，当该事件触发时表示 CSS 文件加载失败，此时回调函数不会被执行；反之，当 CSS 文件加载成功后，img 标签的 onerror 事件不会被触发，回调函数将被执行。
示例
下面是一个使用示例，假设我们需要在页面加载完毕后动态地加载一个名为 styles.css 的 CSS 文件，并在加载完成后弹出一个提示框：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----------- --- ---- ----------- ---- ----------------
-------
------
--------- -----------
--------
-------- ----------- -
---------- ---- --- ---- ----------
-
------------- - ---------- -
--------------------- -----------
--
---------
-------
-------在上述示例中，当页面加载完成后，loadCSS 函数将被调用，并传递了两个参数：styles.css 表示需要加载的 CSS 文件路径，showAlert 表示回调函数。当 CSS 文件加载完成后，showAlert 函数将被执行并弹出一个提示框。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/30614