如何找到给定元素的样式中使用了哪些 CSS 变量？答案

【问题标题】：How can I find what CSS variables are used in styles of a given element?如何找到给定元素的样式中使用了哪些 CSS 变量？
【发布时间】：2017-02-20 22:53:37
【问题描述】：

我有一个定义为 CSS 变量的调色板。

:root {
  --background-normal: #fffff;
  --text-normal: #212a32;
  --background-warning: #ff0000;
  --text-warning: #ffffff;
}

元素的 CSS 类正在使用这些变量。

#article-body {
   background-color: var(--background-normal);
   color: var(--text-normal);
}

不同的类使用不同的变量。我需要做的是分析渲染页面上的某个元素，并告诉它在其样式中使用了哪些 CSS 变量。例如：div#article-body 使用变量background-normal 和text-normal。

我可以使用getComputedStyle 获得元素的计算样式，但返回的样式将所有 CSS 变量替换为实际值。

关于如何提取带有变量名的 CSS 有什么想法吗？

【问题讨论】：

你为什么要这样做？
这是应用程序主题的子任务。我希望用户能够更改页面上不同元素的颜色。应用程序中有很多带有颜色的 CSS 变量，我想减少这个数字，只显示在这个特定元素中实际使用的变量。

标签： javascript css-variables

【解决方案1】：

到目前为止，我发现的唯一解决方法是更改每个 CSS 变量并查看该更改是否出现在任何元素中。像这样的：

var bodyStyles = window.getComputedStyle(document.body);
var check = "rgb(12, 34, 56)";
var vars = ["--background-normal", "--text-normal", "--background-warning", "--text-warning"];

function checkUsage (element, index, array) {
  var origValue = bodyStyles.getPropertyValue(element);
  document.body.style.setProperty(element, check);
  var found = false;
  $("#article-body *").each (function(index, el) {
    var allCSS = getComputedStyle(el).cssText;
    if (allCSS.indexOf(check) >= 0) {
        found = true;
    }
    });
  document.body.style.setProperty(element, origValue);
  if (found) console.log(element);
}

vars.forEach(checkUsage);

这运行得非常快，并且您不会注意到由于颜色变化而导致的闪烁。至少在容器内的少量元素上。如果 CSS 变量之一的原始值与check 相同，则此方法有可能被错误检测。在我的情况下这是可以接受的，但我希望有一种更清洁的方式。

【讨论】：