仅使用 Javascript 获取 CSS 未计算的属性值 [重复]答案

【问题标题】：Get CSS not-computed property-value with Javascript only [duplicate]仅使用 Javascript 获取 CSS 未计算的属性值 [重复]
【发布时间】：2018-03-31 09:25:45
【问题描述】：

因为我对编程很陌生，而且我现在正在发现 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年前打开的，唯一的自我回答我认为并不令人满意......

【问题讨论】：

This article 应该对你有帮助，我认为
另外this example似乎和你的问题有关
“了解它们的 CSS 属性是什么。[...] 因此，我正在寻找开发人员使用 Javascript 放入 CSS 文件中的 CSS 值。” - 出于上述目的，我更愿意建议您熟悉浏览器的开发工具，因为它们已经拥有您可能正在寻找的所有信息 - 并且具有您可以“实时”检查所有内容的优势只需点击几下。您不必弄清楚如何通过 JavaScript 等来获取感兴趣的元素，等等。它们都已经“触手可及”了。

标签： javascript html css

【解决方案1】：

如果您需要以编程方式访问此信息（而不是仅在 devtools 中查看），您正在寻找 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);
}

【讨论】：