如何在不改變當前頁面顏色模式的情況下獲取其他主題模式下的CSS變量值?

如何在不改變當前頁面顏色模式的情況下獲取其他主題模式下的CSS變量值?

巧妙獲取不同主題模式下的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
喜歡就支持一下吧
點贊15 分享