我在样式表中设置了一些 CSS 自定义属性：
:root {
--bc: #fff;
--bc-primary: #eee;
--bc-secondary: #ddd;
}
如果我已经知道 CSS 变量的名称，我可以单独检索它们，如下所示：
console.log(getComputedStyle(document.body).getPropertyValue('--bc'));
// #fff
但如果我想提取 CSS 变量及其值的列表，该怎么做呢？
Update:
- 去抓CORS 错误，我补充说
!styleSheet.href &&到第一个if-陈述。
一种可能的解决方案是解析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]);
}
}
}
}, '');
}
}, '');
:root {
--bc: #fff;
--bc-primary: #eee;
--bc-secondary: #ddd;
}
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
