Question

我想获取元素计算样式和应用该规则的css（文件和行）。与使用“计算”标签时Chrome Dev Tools执行的操作类似，然后单击该值旁边的箭头。

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

实际应用于该元素的CSS值是什么（计算样式）
一旦找到计算出的样式，我想知道它的来源（如文件名和行号）

我知道这可以使用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 Documentation，详细了解如何使用此功能及其与不同浏览器的兼容性。

不幸的是，这种方法不会为您提供此值来自的位置。

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

1 个答案: