巧妙獲取不同主題模式下的css變量值
在多主題模式設計中，獲取當前主題顏色相對容易。然而，如何在不影響當前頁面主題的前提下，獲取其他主題模式的CSS變量值呢？本文將提供一種基于JavaScript的解決方案。
bootstrap CSS代碼片段示例：
:root, [data-bs-theme=light] { --bs-body-color: #212529; } [data-bs-theme=dark] { --bs-body-color: #dee2e6; }
我們知道，可以使用以下JavaScript代碼獲取當前主題顏色：
const body = document.body; const getRealColor = () => window.getComputedStyle(body).getPropertyValue('--bs-body-color'); console.log(getRealColor());
但如何獲取其他主題（例如，未應用的“dark”主題）的顏色值呢？ 關鍵在于解析CSS樣式表并提取變量值。
立即學習“前端免費學習筆記（深入）”；
以下JavaScript函數實現了這一功能：
function getCssVariableValue(selector, variableName) { const styleSheets = document.styleSheets; for (let sheet of styleSheets) { try { const rules = sheet.cssRules || sheet.rules; for (let rule of rules) { if (rule.selectorText === selector) { const style = rule.style; const value = style.getPropertyValue(variableName).trim(); if (value) return value; } } } catch (e) { console.warn('無法訪問樣式表:', e); } } return null; } // 獲取light模式下的顏色值 const lightColor = getCssVariableValue('[data-bs-theme=light]', '--bs-body-color'); console.log('light模式下的顏色值:', lightColor); // 獲取dark模式下的顏色值 const darkColor = getCssVariableValue('[data-bs-theme=dark]', '--bs-body-color'); console.log('dark模式下的顏色值:', darkColor);
該函數遍歷所有樣式表，解析CSS規則，找到指定選擇器下的CSS變量并返回其值。 它直接從CSS中獲取信息，不受當前頁面主題的影響。 此方法的優勢在于其可靠性和獨立性。 希望此方法能幫助您有效管理多主題模式下的CSS變量。
? 版權聲明
文章版權歸作者所有，未經允許請勿轉載。
THE END
