JavaScript 动态加载样式是一种强大的技术，能够让网页中的样式表在运行时动态加载并应用于页面。这种技术能够帮助开发人员提高页面性能，减少页面加载时间，并提供更好的用户体验。

下面举例说明如何使用 JavaScript 动态加载样式。首先，我们需要创建一个新的link元素，然后将其添加到文档的头部：

const link = document.createElement("link");link.rel = "stylesheet";link.href = "/post/style.css";document.head.appendChild(link);

在这个例子中，我们创建了一个名为link的新元素，并将其类型设置为stylesheet。然后，我们将其 href 属性设置为我们希望加载的样式表的地址，并将其添加到文档的头部。

动态加载样式表的一个优点是，它允许我们根据用户的选择或行为动态更改样式表。例如，假设我们有一个包含多个主题的网站，用户可以点击一个按钮来切换主题。下面是一个示例代码：

const button = document.querySelector("#theme-button");button.addEventListener("click", () =>{const link = document.querySelector("#theme-link");if (link.getAttribute("href") === "light.css") {link.href = "/post/dark.css";} else {link.href = "/post/light.css";}});

在这个示例中，我们首先获取一个按钮元素，然后将一个点击事件监听器添加到它上面。当用户点击按钮时，我们获取当前的样式表链接（假设它的 id 是theme-link），并检查其 href 属性是否等于相应主题的样式表路径。如果是，我们将它更新为另一种主题的样式表。

另一个常见的使用动态加载样式表的情境是，当页面上的某些内容加载时，仅加载与该内容相关的样式。这可以帮助减少加载时间，并使页面更加快速响应。例如，如果我们有一个 Web 应用程序，其中包含多个模块，每个模块的样式都不同，我们可以使用动态加载样式表来仅加载当前模块需要的样式表：

const button = document.querySelector("#module-button");button.addEventListener("click", () =>{const link = document.createElement("link");link.rel = "stylesheet";link.href = "/post/module.css";document.head.appendChild(link);});

在这个示例中，我们首先获取一个按钮元素，并将一个点击事件监听器添加到它上面。当用户点击按钮时，我们创建一个名为link的新元素，并将其类型设置为stylesheet。然后，我们将其 href 属性设置为我们希望加载的模块的样式表路径，并将其添加到文档的头部。

JavaScript 动态加载样式表是一种强大的技术，可以极大地提高页面性能，并提供更好的用户体验。使用上述技术，我们可以根据用户的选择或行为动态更改样式表，仅加载与页面内容相关的样式表，以及执行许多其他有用的任务。