用Javascript获取CSS类键值对？ [复制]答案

【问题标题】：Obtain CSS class key value pairs with Javascript? [duplicate]用Javascript获取CSS类键值对？ [复制]
【发布时间】：2018-09-24 13:09:42
【问题描述】：

我想要一种使用 Javascript 获取 CSS 类的所有键值对的方法。

一个例子是我有一门课

.example { color: black; display: block; }

然后我可以使用 Javascript 方法来获取“.example”类键值对

{ color: black; display: block; }

这可能吗？

【问题讨论】：

您只能在DOM-HTML element 上使用getComputedStyle() 获得此信息。
不要回答这个问题，是一个Dup。

标签： javascript css

【解决方案1】：

这肯定需要一些改进，但它已经尽可能接近了（使用 Chrome，也在 Firefox 中测试过）。

let rules = Array.from(document.styleSheets[0].cssRules).filter(x => x.selectorText === '.example')[0].style, i = 0, classRule = {}

while (rules.hasOwnProperty(i + '')) {
  classRule[rules[String(i)]] = rules[rules[String(i++)]]
}

console.log(classRule)

.example {
  color: black;
  display: block;
}

【讨论】：

我建议去掉示例中的 <div>，它不是必需的，但它看起来像是从适用于该元素的 CSS 而不是从规则集中获取结果.同样，变量名称el 表明它是一个元素而不是规则集，所以我将重命名它。
感谢我已经在代码中工作的改进建议。我开始尝试使用元素的 API，但后来切换到 document.styleSheets API。
事实上，欺骗链接的答案提供了非常好的、可重复使用的解决方案。