計算されたスタイルとこのルールのソースを取得するには？

Question

要素の計算されたスタイルとそのルールを適用するCSS（ファイルと行）を取得したいと思います。 「計算された」タブが使用されているときにChrome Dev Toolsと同様に、値の横にある矢印をクリックします。要するに

は、私は、JavaScriptを使用して、これら二つのことを知ることができるようにしたい：

1. 実際にその要素（計算式）に適用されているCSS値
2. を何ですか私は計算されたスタイルを見つけたら、

（ファイル名と行番号のように）私は、これはデベロッパーツールを使用して手動で行うことができます知っている、それはどこから来るのか私は知りたいが、私はスクリプトによって行われ、これを必要とします。

おかげ

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を参照してください。この機能を使用する方法が詳しく知ることができ、それが別のブラウザとの互換性です。

残念ながら、この方法では、この値がどこから来るのかはわかりません。