仅用Javascript获取CSS非计算属性值

由于我对编程颇为陌生，现在我发现Bootstrap，我正在使用容器和行以及col-XX等进行练习，以了解如何他们的CSS属性。仅用Javascript获取CSS非计算属性值

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

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

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

感谢阿尔诺

PS：我知道这个主题已经打开there但7年前开了，只有自我的答案不能满足我想......

来源

2017-10-19 arnaudambro

[本文]（https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model/Using_dynamic_styling_information）应 – Flying

另外[这个例子]（https://developer.mozilla.org/en-US/docs/Web/API/StyleSheetList#Example）似乎与你的问题 – Flying

_“知道如何他们的CSS属性是什么？[...]因此，我正在寻找获取开发人员使用Javascrip放入CSS文件的CSS值吨。 “ - 为了达到既定目的，我宁愿推荐您熟悉浏览器的开发工具，因为它们拥有您可能已经查找的所有信息 - 并且具有可以检查”现场“一切的优势，只需点击几下鼠标就可以了，你不需要弄清楚如何获得感兴趣的元素，例如JavaScript，等等，它们都已经“触手可及”了。 – CBroe

如果您需要以编程方式访问这些信息（与在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); 
 
}

来源

2017-10-19 11:05:47

仅用Javascript获取CSS非计算属性值

回答

相关问题