我在样式表中设置了一些CSS自定义属性:
:root { --bc: #fff; --bc-primary: #eee; --bc-secondary: #ddd; }
如果我已经知道CSS变量的名称,我可以单独检索它们,如下所示:
console.log(getComputedStyle(document.body).getPropertyValue('--bc')); // #fff
但是,如果我想提取一个CSS变量及其值的列表,该如何完成呢?
qkf9rpyu1#
更新:
!styleSheet.href &&
if
一种可能的解决方案是解析document.styleSheets,然后将规则拆分为属性/值
document.styleSheets
var allCSS = [].slice.call(document.styleSheets) .reduce(function(prev, styleSheet) { if (!styleSheet.href && styleSheet.cssRules) { return prev + [].slice.call(styleSheet.cssRules) .reduce(function(prev, cssRule) { if (cssRule.selectorText == ':root') { var css = cssRule.cssText.split('{'); css = css[1].replace('}','').split(';'); for (var i = 0; i < css.length; i++) { var prop = css[i].split(':'); if (prop.length == 2 && prop[0].indexOf('--') == 1) { console.log('Property name: ', prop[0]); console.log('Property value:', prop[1]); } } } }, ''); } }, '');
s4n0splo2#
基于LGSon的answer这里是类似的东西,但使用map,filter和flat,使其更容易逐行阅读。基于Exo Flame的answer捕获CORS错误。
map
filter
flat
const variables = Array.from(document.styleSheets) .filter(styleSheet => { try { return styleSheet.cssRules; } catch(e) { console.warn(e); } }) .map(styleSheet => Array.from(styleSheet.cssRules)) .flat() .filter(cssRule => cssRule.selectorText === ':root') .map(cssRule => cssRule.cssText.split('{')[1].split('}')[0].trim().split(';')) .flat() .filter(text => text !== "") .map(text => text.split(':')) .map(parts => ({key: parts[0].trim(), value: parts[1].trim() })) ; console.log(variables);
:root { --foo: #fff; --bar: #aaa }
k4aesqcs3#
MDN有一个页面演示了“实验性”Element.computedStyleMap方法的使用:
for (const [prop, val] of document.documentElement.computedStyleMap()){ console.log( prop, val); }
您可以在caniuse上看到当前对此的支持。截至上次编辑,除Firefox外,所有主流浏览器都支持此API。这个CSS Tricks tutorial明确地回答了这个问题,并以清晰的代码捕获了基本样式规则中的自定义属性。
cigdeys34#
在新的Chrome中,使用JavaScript阅读外部样式表可能会因CORS而中断。有没有人知道一个方法,如果没有,让这是一个警告,如果你使用CDN。https://stackoverflow.com/a/49994161这很有帮助:https://betterprogramming.pub/how-to-fix-the-failed-to-read-the-cssrules-property-from-cssstylesheet-error-431d84e4a139这里有一个过滤掉远程工作表的版本,所以你仍然可以得到你的本地样式我还使用了Array.from()来提高可读性
var allCSSVars = Array.from(document.styleSheets) .filter((styleSheet) => { let isLocal = !styleSheet.href || styleSheet.href.startsWith(window.location.origin) if (!isLocal) console.warn("Skipping remote style sheet due to cors: ", styleSheet.href); return isLocal; }) .map((styleSheet) => Array.from(styleSheet.cssRules)) .flat() .filter((cssRule) => cssRule.selectorText === ':root') .map((cssRule) => cssRule.cssText.split('{')[1].split('}')[0].trim().split(';')) .flat() .filter((text) => text !== '') .map((text) => text.split(':')) .map((parts) => { return {key: parts[0].trim(), value: parts[1].trim()} }) console.log("vars: ", allCSSVars) //another way not sure whitch is best but the top way is looking promising allCSSVars = [].slice.call(document.styleSheets) .reduce(function (prev, styleSheet) { try { if (styleSheet.cssRules) { return prev + [].slice.call(styleSheet.cssRules) .reduce(function (prev, cssRule) { if (cssRule.selectorText == ':root') { var css = cssRule.cssText.split('{'); css = css[1].replace('}', '').split(';'); for (var i = 0; i < css.length; i++) { var prop = css[i].split(':'); if (prop.length == 2 && prop[0].indexOf('--') == 1) { console.log('Property name: ', prop[0]); console.log('Property value:', prop[1]); } } } }, ''); } } catch (e) { console.warn("Skiping: ", e) return []; } }, '');
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css">
这显示了没有try语句会发生什么,我无法快速转换这些密集的代码,所以使用了更传统的版本:)。
const variables = [].slice.call(document.styleSheets) .map((styleSheet) => [].slice.call(styleSheet.cssRules)) .flat() .filter((cssRule) => cssRule.selectorText === ':root') .map((cssRule) => cssRule.cssText.split('{')[1].split('}')[0].trim().split(';')) .flat() .filter((text) => text !== '') .map((text) => text.split(':')) .map((parts) => parts[0].trim() + ': ' + parts[1].trim()) ; console.log(variables.join('\n'));
mwngjboj5#
谢谢@Ason和@mvndaai。我个人很喜欢这个格式:
5条答案
按热度按时间qkf9rpyu1#
更新:
!styleSheet.href &&
添加到第一个if
-语句中。一种可能的解决方案是解析
document.styleSheets
,然后将规则拆分为属性/值s4n0splo2#
基于LGSon的answer这里是类似的东西,但使用
map
,filter
和flat
,使其更容易逐行阅读。基于Exo Flame的answer捕获CORS错误。k4aesqcs3#
MDN有一个页面演示了“实验性”Element.computedStyleMap方法的使用:
您可以在caniuse上看到当前对此的支持。截至上次编辑,除Firefox外,所有主流浏览器都支持此API。
这个CSS Tricks tutorial明确地回答了这个问题,并以清晰的代码捕获了基本样式规则中的自定义属性。
cigdeys34#
在新的Chrome中,使用JavaScript阅读外部样式表可能会因CORS而中断。
有没有人知道一个方法,如果没有,让这是一个警告,如果你使用CDN。
https://stackoverflow.com/a/49994161
这很有帮助:https://betterprogramming.pub/how-to-fix-the-failed-to-read-the-cssrules-property-from-cssstylesheet-error-431d84e4a139
这里有一个过滤掉远程工作表的版本,所以你仍然可以得到你的本地样式我还使用了Array.from()来提高可读性
这显示了没有try语句会发生什么,我无法快速转换这些密集的代码,所以使用了更传统的版本:)。
mwngjboj5#
谢谢@Ason和@mvndaai。我个人很喜欢这个格式: