Saya telah menetapkan beberapa properti khusus CSS di stylesheet saya:

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

Saya dapat mengambilnya satu per satu jika saya sudah mengetahui nama variabel CSS seperti:

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

// #fff

Tetapi jika saya ingin menarik daftar variabel CSS dan nilainya, bagaimana cara melakukannya?

7
MorganR 18 Agustus 2017, 21:40

2 jawaban

Jawaban Terbaik

Salah satu solusi yang mungkin adalah mengurai document.styleSheets, dan kemudian membagi aturan menjadi properti/nilai

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;
}
12
Ason 18 Agustus 2017, 19:45

Berdasarkan jawaban LGSon di sini adalah sesuatu yang serupa tetapi menggunakan map, filter, dan flat untuk memudahkan membaca baris demi baris.

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 => ({key: parts[0].trim(), value: parts[1].trim() }))
;

console.log(variables);
:root {
    --foo: #fff;
    --bar: #aaa
}
5
mvndaai 22 Mei 2019, 06:15