Question

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

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

所以很多人都在谈论window.getComputed(element).getPropertyValue("property")，但我并不感兴趣。我在某处cssText听到了，但我不确定它是不是很好。

有解决方案吗？实际上是否存在一个位置，其中存储了选择器写入的所有属性值，与属性值计算并行？

由于阿诺

PS：我知道这个主题已经开放there但它在7年前就开放了，我认为唯一的自我回答并不令人满意......

Answer 1

如果您需要以编程方式访问此信息（而不是仅仅在devtools中查看），那么您正在寻找document.styleSheets集合。集合中的每个样式表都具有该样式表的CSS规则和媒体查询规则等，其形式可以访问实际的样式信息，而不是计算结果。

例如：

＆＃13;

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);
    }
  });
});

＆＃13;

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

＆＃13;

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

1 个答案: