在网页开发过程中，有时我们需要在不刷新页面的情况下更改页面的样式。比如，在实现主题切换功能时，可以动态地替换 CSS 文件以应用新的样式。本文将介绍如何使用 JavaScript 实现这一功能。
1. 获取当前 CSS 文件
在运行时更改 CSS 文件，首先需要获取当前正在使用的 CSS 文件。可以通过遍历 <link> 标签来获取所有的 CSS 文件，并找到当前生效的文件。
-------- --------------- -
--- ---------- - -----
----- ----- - --------------------------------------
--- ---- - - -- - - ------------- ---- -
-- ------------- --- ------------ -- ------------------- -
---------- - ---------
------
-
-
------ -----------
-该函数返回当前正在使用的 CSS 文件的 <link> 元素。
2. 替换 CSS 文件
要替换 CSS 文件，可以创建一个新的 <link> 元素，然后将其添加到文档中。同时，需要移除当前正在使用的 CSS 文件。
-------- --------------------- - ----- ------ - ---------------- ----- ------ - ------------------------------- ---------- - ------------- ----------- - ---------- ---------------------------------- --------------- - ----- -
该函数接收新 CSS 文件的 URL，创建一个新的 <link> 元素，并将其添加到文档中。然后将当前正在使用的 CSS 文件禁用（通过设置 disabled 属性为 true）。
3. 应用新样式
当替换了 CSS 文件后，需要重新加载页面上的所有元素以应用新样式。可以通过遍历文档中的所有元素，并强制重新计算样式来实现这一点。
-------- --------------- -
----- -------- - -----------------------------------
--- ---- - - -- - - ---------------- ---- -
----- ------ - -------------------------------------
----- --------- - ---
--- ---- - - -- - - -------------- ---- -
----- -------- - ----------
------------------- - ----------------------------------
-
------------------------- - ---
--- ---- ---- -- ---------- -
----------------------------------- -----------------
-
-
-该函数获取所有文档中的元素，遍历每个元素并获取其计算样式。然后将该元素的内联样式重置为空字符串，并将计算样式应用到该元素的内联样式中。
4. 示例代码
下面是一个完整的示例代码，可以将其放在网页的 JavaScript 文件中：
-------- --------------- -
--- ---------- - -----
----- ----- - --------------------------------------
--- ---- - - -- - - ------------- ---- -
-- ------------- --- ------------ -- ------------------- -
---------- - ---------
------
-
-
------ -----------
-
-------- --------------------- -
----- ------ - ----------------
----- ------ - -------------------------------
---------- - -------------
----------- - ----------
----------------------------------
--------------- - -----
-
-------- --------------- -
----- -------- - -----------------------------------
--- ---- - - -- - - ---------------- ---- -
----- ------ - -------------------------------------
----- --------- - ---
--- ---- - - -- - - -------------- ---- -
----- -------- - ----------
------------------- - ----------------------------------
-
------------------------- - ---
--- ---- ---- -- ---------- -
----------------------------------- -----------------
-
-
-使用示例：
------- ------------------------------------- -------------------------------
该示例
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/27590