Блог

Главная - Вопросы по программированию - Получить переменные CSS, применяемые к элементу

Получить переменные CSS, применяемые к элементу

#javascript #webkit #css-variables

Вопрос:

В chrome / chromium я хотел бы перечислить все переменные CSS (имена и значения переменных), применяемые к элементу HTML. Следующий код работает в Firefox, но не поддерживается в браузерах webkit. Есть ли возможный обходной путь?

 let style = getComputedStyle(document.body);
for (let i = 0; i < style.length; i  ) {
  let prop = style[i]
  if(prop.includes("--")){
    let val = style.getPropertyValue(prop)
    document.body.innerHTML = "Works in Firefox but not in Chromium:<br>"
    document.body.innerHTML  = prop " " val
  }
} 
 :root{
  --c:lime;
}
body{
  background:var(--c);
}

Комментарии:

1. github.com/w3c/csswg-drafts/issues/1316 может быть, это будет полезно?

2. style.getPropertyValue('--c') // lime работает в Chrome и Firefox.

3. @evolutionxbox Поучительно, спасибо! И да, getPropertyValue работает, но в моем случае я не знаю имен переменных, мне нужно их восстановить.

4. Как насчет css-tricks.com/… ?

5. @evolutionxbox, Которые действительно решают мою проблему! Спасибо. Я отвечу на свой пост.

Ответ №1:

Это решает проблему:

 const isSameDomain = (styleSheet) => {
  if (!styleSheet.href) {
    return true;
  }

  return styleSheet.href.indexOf(window.location.origin) === 0;
};

const isStyleRule = (rule) => rule.type === 1;

const getCSSCustomPropIndex = () =>
  [...document.styleSheets].filter(isSameDomain).reduce(
    (finalArr, sheet) =>
      finalArr.concat(
        [...sheet.cssRules].filter(isStyleRule).reduce((propValArr, rule) => {
          const props = [...rule.style]
            .map((propName) => [
              propName.trim(),
              rule.style.getPropertyValue(propName).trim()
            ])
            .filter(([propName]) => propName.indexOf("--") === 0);

          return [...propValArr, ...props];
        }, [])
      ),
    []
  );

document.body.innerHTML = getCSSCustomPropIndex() 
 html {
  --c: lime;
}

 body {
  background:var(--c);
}

Спасибо @evolutionxbox за указание решения.

Метки: ,