JavaScript讀取bootstrap主題css變量
Bootstrap利用CSS變量(custom properties)來管理不同主題模式（例如light和dark）下的顏色值。本文探討如何在不改變當前頁面主題的情況下，通過JavaScript獲取其他主題模式下的CSS變量值。
直接使用window.getComputedStyle只能獲取當前應用的樣式值。要獲取其他主題模式的變量值，需要解析CSS文件內容。假設Bootstrap CSS內容已加載到名為cssContent的字符串變量中，例如：
:root, [data-bs-theme=light] { --bs-body-color: #212529; } [data-bs-theme=dark] { --bs-body-color: #dee2e6; }
我們可以使用正則表達式提取特定主題模式下的變量值：
function getThemeColor(cssContent, themeSelector, variableName) { const regex = new RegExp(`${themeSelector}s*{s*--${variableName}s*:s*([^;]*)s*;`); const match = cssContent.match(regex); return match ? match[1].trim() : NULL; } const cssContent = ` :root, [data-bs-theme=light] { --bs-body-color: #212529; } [data-bs-theme=dark] { --bs-body-color: #dee2e6; } `; const lightColor = getThemeColor(cssContent, '[data-bs-theme=light]', 'bs-body-color'); const darkColor = getThemeColor(cssContent, '[data-bs-theme=dark]', 'bs-body-color'); console.log('Light theme color:', lightColor); // 輸出: #212529 console.log('Dark theme color:', darkColor); // 輸出: #dee2e6
getThemeColor函數接收CSS內容、主題選擇器（例如'[data-bs-theme=light]’）和變量名作為參數，返回匹配的變量值。 該方法通過正則表達式匹配CSS規則，并提取變量值。如果沒有找到匹配項，則返回null。 這種方法可以有效地從CSS字符串中提取不同主題模式下的CSS變量值，而無需修改頁面樣式。 需要注意的是，實際應用中需要獲取真實的Bootstrap CSS內容，而不是像示例中那樣直接定義一個字符串。
立即學習“Java免費學習筆記（深入）”；
? 版權聲明
文章版權歸作者所有，未經允許請勿轉載。
THE END
