如何获取计算样式以及该规则的来源？ [复制]

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

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

1. 实际应用于该元素的 CSS 值是多少（计算样式）
2. 一旦找到计算的样式，我想知道它来自哪里（例如文件名和行号）

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

Thanks

您可以使用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>

See MDN 文档 https://developer.mozilla.org/en/docs/Web/API/Window/getComputedStyle了解更多如何使用此功能及其与不同浏览器的兼容性。

不幸的是，这种方法不会告诉您该值的来源位置。