CSS是前端开发中不可或缺的一部分，它用于美化和布局网站。在某些情况下，需要使用JavaScript动态地加载CSS文件，以便根据用户的操作或设备屏幕大小来更改样式。
为什么要动态加载CSS
动态加载CSS文件可以带来以下好处：
- 降低页面加载时间：当页面包含大量CSS文件时，动态加载只需要在需要时才加载CSS文件，而不是在页面加载时加载所有CSS文件，可以减少对页面加载时间的影响。
- 更灵活的样式控制：通过动态加载CSS文件，可以根据用户的设备类型、浏览器类型等条件来加载不同的CSS文件，实现更加个性化的样式控制。
使用JavaScript加载CSS
方法一：创建<link>元素
这是最常见的动态加载CSS的方法之一。方法很简单，只需使用document.createElement()创建一个新的<link>元素，然后将它添加到文档的头部即可。示例代码如下：
-------- ------------ - --- ---- - ------------------------------- --------- - ----------- -------- - ------------- --------- - ---- ----------------------------------------------------------- - -- ----- ---------------------
方法二：使用XMLHttpRequest对象
如果您希望在加载CSS文件后执行某些操作，例如修改DOM元素或调用回调函数，则可以使用XMLHttpRequest对象。该方法通过创建一个请求并将其发送到服务器来加载CSS文件。示例代码如下：
-------- ------------ --------- -
--- --- - --- -----------------
--------------- -----
---------- - ---------- -
--- ---- - -------------------------------
--------- - -----------
-------- - -------------
--------- - ----
-----------------------------------------------------------
-----------
--
-----------
-
-- ------------
-------------------- ---------- -
---------------- ----------
---总结
动态加载CSS文件是一种非常有用的技术，可以帮助优化页面性能，实现更灵活的样式控制。本文介绍了两种使用JavaScript动态加载CSS的方法，并提供了示例代码。使用这些方法，您可以轻松地实现动态加载CSS文件，并根据需要对样式进行定制。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/8844