JavaScript獲取bootstrap不同主題模式下的css變量
在Bootstrap框架中，主題模式（例如light和dark）通過CSS變量控制樣式。本文介紹如何在不切換主題的情況下，使用JavaScript獲取其他主題模式下的CSS變量值。
Bootstrap的CSS中，主題相關的CSS變量定義如下所示（示例）：
:root, [data-bs-theme=light] { --bs-body-color: #212529; } [data-bs-theme=dark] { --bs-body-color: #dee2e6; }
直接使用window.getComputedStyle只能獲取當前生效的CSS變量值。要獲取其他主題模式的變量值，需要解析CSS規則。以下代碼演示如何獲取dark模式下的–bs-body-color值，而無需修改當前主題：
function getThemeVariable(theme, variable) { const styleSheets = document.styleSheets; let value = null; for (const sheet of styleSheets) { try { for (const rule of sheet.cssRules) { if (rule.selectorText === `[data-bs-theme=${theme}]`) { const match = rule.style.cssText.match(new RegExp(`${variable}:s*(.+?);`)); if (match) { value = match[1].trim(); break; } } } if (value) break; // 找到后直接跳出循環 } catch (error) { // 處理跨域或其他錯誤 console.error("Error Accessing stylesheet:", error); } } return value; } const darkModeBodyColor = getThemeVariable('dark', '--bs-body-color'); console.log('Dark mode --bs-body-color:', darkModeBodyColor);
這段代碼定義了一個函數getThemeVariable，接收主題名稱和變量名稱作為參數，并返回對應的變量值。它遍歷所有樣式表，查找匹配指定主題的選擇器，然后使用正則表達式提取變量值。 錯誤處理機制也得到了增強，以便更穩健地處理潛在的樣式表訪問問題。 通過調用getThemeVariable(‘dark’, ‘–bs-body-color’)，即可獲取dark模式下的–bs-body-color的值。
立即學習“Java免費學習筆記（深入）”；
這個方法避免了直接修改頁面主題，從而保持了用戶體驗的一致性，同時能夠靈活地訪問不同主題下的CSS變量。 請注意，此方法依賴于Bootstrap的CSS結構，如果Bootstrap的CSS結構發生變化，可能需要調整正則表達式。
? 版權聲明
文章版權歸作者所有，未經允許請勿轉載。
THE END
