我如何找到在给定元素的样式中使用的CSS变量
How can I find what CSS variables are used in styles of a given element?
我有一个定义为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变量,并查看该更改是否出现在任何元素中。像这样:
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
相同,则该方法有可能检测错误。这在我的情况下是可以接受的,但我希望有一个更干净的方法。
相关文章:
- 连接变量,在我的情况下背景样式损坏
- 记事本++ Javascript格式样式和变量列表
- 无法“替换”样式“中的内容 - 其中”html“存储在变量中
- 将样式值设置为Javascript变量
- 在样式标记上插入变量
- 将attr样式存储在变量中
- 如何分离javaScript变量's整数和它's decimal以分别设置样式
- 需要一些有关以以下样式声明变量的信息
- 使用 JavaScript 变量在 JQuery 中设置样式
- 使用变量引用样式属性
- 来自指令的角度范围变量未以 ng 样式同步
- 在 jquery 中从日期中减去变量(倒计时样式)
- 如何在 CSS 样式中使用 PHP 变量
- 将变量附加到jquery中的样式
- 带有变量的javascript样式
- javascript样式-我应该定义变量/类吗
- 基于javascript中的会话变量设置特定的样式表
- 将变量传递给LESS.js样式表
- 如何使用“样式”中的变量标签
- 如何在js中使用样式标签使用变量