如何获得计算样式和此规则的来源?

Question

我想获取元素计算样式和应用该规则的css(文件和行)。类似于 Chrome 开发工具在使用"计算"标签并单击值旁边的箭头时所做的操作。

简而言之，我希望能够使用javascript找出这两件事：

1. 实际应用于该元素的 CSS 值是什么(计算样式)
2. 找到计算样式后，我想知道它来自哪里(如文件名和行号)

我知道这可以使用 devtools 手动完成，但我需要通过脚本完成。

谢谢

Answer 1

您可以使用Window.getComputedStyle().用法示例：

<style>
#elem-container{
position: absolute;
left:     100px;
top:      200px;
height:   100px;
}
</style>
<div id="elem-container">dummy</div>
<div id="output"></div>  
<script>
function getTheStyle(){
var elem = document.getElementById("elem-container");
var theCSSprop = window.getComputedStyle(elem,null).getPropertyValue("height");
document.getElementById("output").innerHTML = theCSSprop;
}
getTheStyle();
</script>

请参阅 MDN 文档以了解有关如何使用此功能以及它与不同浏览器的兼容性的更多信息。

遗憾的是，此方法不会为您提供此值的来源位置。