javascript - 仅使用 Javascript 获取 CSS 未计算的属性值

Question

因为我对编程还很陌生，而且我现在正在发现 Bootstrap，所以我正在使用容器、行和 col-XX 等进行练习，以了解它们的 CSS 属性是什么。

因此，我正在寻找开发人员使用 Javascript 放入 CSS 文件中的 CSS 值。不是 jQuery，而是普通 JS。不是计算的 CSS 值，而是写入的 CSS 值。就像我们在控制台中的那个一样。我想获取它们，以便以这种方式将它们放回 HTML 中:<p>margin-right: 5%</p> ，例如。

所以很多人都在谈论window.getComputed(element).getPropertyValue("property") ，但我不感兴趣。 我听说过cssText ，但我不确定这是否是好的。

有解决办法吗？实际上是否有一个地方可以存储选择器的所有属性值写入，与计算的属性值并行？

谢谢 阿诺

PS:我知道该主题已经开放 there但7年前就开业了，唯一的 self 回答我认为并不令人满意......

Answer 1

如果您需要以编程方式访问此信息(而不是仅在开发工具中查看)，您需要寻找 document.styleSheets收藏。集合中的每个样式表都具有该样式表的 CSS 规则和媒体查询规则等，您可以在表单中访问实际样式信息，而不是计算结果。

例如:

var forEach = Array.prototype.forEach.call.bind(Array.prototype.forEach);
forEach(document.styleSheets, function(sheet, index) {
  forEach(sheet.cssRules || sheet.rules, function(rule) {
    if (rule instanceof CSSStyleRule && rule.selectorText == ".foo") {
      console.log(".foo's width rule: " + rule.style.width);
    }
  });
});

.foo {
  width: calc(100% - 10px);
}