Question

我有一个定义为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的任何想法？

Answer 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相同，则此方法有可能进行错误检测。在我的情况下这是可以接受的，但我希望有一种更清洁的方式。

如何找到给定元素样式中使用的CSS变量？

1 个答案: