列出CSS自定义属性（CSS变量） | 列出CSS自定义属性

本文介绍了列出CSS自定义属性（CSS变量）的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我在样式表中设置了一些CSS自定义属性：

I've set some CSS custom properties in my stylesheet:

:root {
    --bc: #fff;
    --bc-primary: #eee;
    --bc-secondary: #ddd;
}

如果我已经知道CSS变量的名称，我可以单独检索它们所以：

I can retrieve them individually if I already know the name of the CSS variable like so:

console.log(getComputedStyle(document.body).getPropertyValue('--bc'));

// #fff

但如果我想提取一份清单CSS变量及其值如何完成？

But if I wanted to pull a list of CSS variables and their values out, how would that be done?

推荐答案

一种可能的解决方案是解析 document.styleSheets ，然后将规则拆分为属性/值

One possible solution would be to parse the document.styleSheets, and then split the rules into properties/values

var allCSS = [].slice.call(document.styleSheets)
  .reduce(function(prev, styleSheet) {
    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]);
              }
            }
          }
        }, '');
    }
  }, '');

:root {
    --bc: #fff;
    --bc-primary: #eee;
    --bc-secondary: #ddd;
}

这篇关于列出CSS自定义属性（CSS变量）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！