Список пользовательских свойств CSS (CSS-переменные)

Question

Я установил некоторые пользовательские свойства CSS в моей таблице стилей:

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

Я могу получить их по отдельности, если я уже знаю имя переменной CSS следующим образом:

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

// #fff

Но если бы я хотел вытащить список переменных CSS и их значений, как бы это было сделано?

Answer 1

Одним из возможных решений было бы проанализировать document.styleSheets, а затем разделить правила на свойства / значения

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;
}

Answer 2

Основываясь на LGSon, здесь что-то похожее, но с использованием map,filter, а также flatчтобы было проще читать построчно.

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
}

Answer 3

В MDN есть страница, демонстрирующая использование «экспериментального» метода Element.computedStyleMap :

      for (const [prop, val] of document.documentElement.computedStyleMap()){ 
  console.log( prop, val); 
}

К сожалению, пока не поддерживается Safari или Firefox.

Этот учебник CSS Tricks явно отвечает на вопрос, а также фиксирует пользовательские свойства в основных правилах стиля с четким кодом.

Answer 4

В новом Chrome чтение внешних таблиц стилей с использованием Javascript может прерваться из-за CORS.

Кто-нибудь знает способ обойти это, и если ничего, пусть это будет предупреждением, если вы используете CDN.

/questions/37023140/uncaught-domexception-ne-udalos-prochitat-svojstvo-cssrules/37023143#37023143

Это было полезно: https://betterprogramming.pub/how-to-fix-the-failed-to-read-the-cssrules-property-from-cssstylesheet-error-431d84e4a139

Вот версия, которая отфильтровывает удаленные листы, поэтому вы по-прежнему получаете свои локальные стили. Я также использовал Array.from() для улучшения читаемости.

Answer 5

Спасибо @Ason и @mvndaai. Мне лично нравится такое форматирование: