Question

我知道如何获取和设置单个自定义属性（CSS变量）。但是我不知道如何获取所有自定义属性（键：值）的列表？

获取我的自定义属性的示例（如果我知道名字的话）

const bodyStyles = window.getComputedStyle(document.body);
const colorText = bodyStyles.getPropertyValue('--color-text');
const colorBg = bodyStyles.getPropertyValue('--color-background');

console.log('color text is =>', colorText);
console.log('color background is =>', colorBg);

:root {
  --color-text: red;
  --color-background: #ffedd0;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  color: var(--color-text);
  background: var(--color-background);
}

<p>how to get all custom properties (key: value) per javascript ?</p>

我的问题是，如果我不知道它们的名称，如何获得所有属性的列表？

就我而言，我想要一个这样的数组：

allBodyProperties = [
  { "--color-text": "red" },
  { "--color-background": "#ffedd0" }
];

是否有类似 getPropertyEntries() 的内容？

编辑

这不是重复的，因为链接的答案在技术上已经过时并且无法在当今的浏览器上运行-> getMatchedCSSRules

如何获取自定义属性列表（CSS变量）？ -类似“ getPropertyEntries（）”的东西

0 个答案: