jQuery 如何在 CSS 样式表之间动态切换？

使用 jQuery 进行动态样式表切换

Web 开发中的一个常见任务是使用户能够通过切换样式表来更改网站的外观应用于它。这对于提供不同的主题或配色方案特别有用。在本文中，我们将探讨如何使用 jQuery 动态交换 CSS 样式表。

基于按钮的样式表切换

假设我们有一个包含两个按钮的网页、“原始”和“灰度”，其中单击每个按钮应在两个之间切换样式表：

<button></button>

按钮点击的 jQuery 处理程序

要处理按钮点击并执行样式表切换，我们可以使用 jQuery 的事件处理功能：

$('#grayscale').click(function () {
  $('link[href="style1.css"]').attr('href', 'style2.css');
});

$('#original').click(function () {
  $('link[href="style2.css"]').attr('href', 'style1.css');
});

说明：

• 单击“灰度”按钮时会触发首次单击处理程序。它选择具有“style1.css”样式表的元素（假设它是当前样式表）并将其 href 属性更改为“style2.css”。
• 单击“Original”按钮时，第二个单击处理程序会反转该过程，将“style2.css”替换为“style1.css”。

以上是jQuery 如何在 CSS 样式表之间动态切换？的详细内容。更多信息请关注PHP中文网其他相关文章！