Javascript 如何获取此规则的计算样式和来源？

我想获得元素计算样式和应用该规则的css（文件和行）。类似于Chrome开发工具在使用“Computed”选项卡并单击值旁边的箭头时所做的操作

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

实际应用于该元素的CSS值是什么（计算样式）

找到计算样式后，我想知道它来自何处（如文件名和行号）

我知道这可以使用devtools手动完成，但我需要一个脚本来完成

---

谢谢

您可以使用

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>

#元素容器{
位置：绝对位置；
左：100px；
顶部：200px；
高度：100px；
}
笨蛋
函数getTheStyle（）{
var elem=document.getElementById（“elem容器”）；
var theCSSprop=window.getComputedStyle（elem，null）.getPropertyValue（“高度”）；
document.getElementById（“输出”）.innerHTML=theCSSprop；
}
getTheStyle（）；

有关如何使用此功能及其与不同浏览器的兼容性的详细信息，请参阅

---

不幸的是，这种方法无法给出该值的来源位置。

它解决了我的第一个问题，但没有解决第二个问题：（一旦我找到了计算样式，我想知道它的来源（如文件名和行号））。由于这个问题被锁定，我对链接问题中的第二个问题给出了答案：achref，谢谢你的回答。在这里询问之前，我找到了这个解决方案，但不幸的是，我需要CSS文件中定义它的位置。。。