jQuery 如何在 CSS 樣式表之間動態切換？

使用jQuery 進行動態樣式表切換

Web 開發中的一個常見任務是使用戶能夠透過切換樣式表來更改網站的外觀應用於它。這對於提供不同的主題或配色方案特別有用。在本文中，我們將探討如何使用 jQuery 動態交換 CSS 樣式表。

基於按鈕的樣式表切換

假設我們有一個包含兩個按鈕的網頁、“原始”和“灰度”，其中單擊每個按鈕應在兩個之間切換樣式表：

<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中文網其他相關文章！