2

我有一个定义为 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.

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

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

4

1 回答 1

0

到目前为止，我发现的唯一解决方法是更改​​每个 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. 在我的情况下这是可以接受的，但我希望有一种更清洁的方式。

于 2016-10-13T05:44:07.940 回答