Wie berechnet man den Stil und die Quelle dieser Regel?

Question

Ich möchte den Element-berechneten Stil und die CSS (Datei und Zeile), die diese Regel anwendet. Ähnlich wie bei Chrome Dev Tools, wenn die Registerkarte "Berechnet" verwendet wird und Sie auf den Pfeil neben dem Wert klicken.

Kurz gesagt, ich möchte in der Lage zu sein, mit Hilfe von Javascript, diese beiden Dinge herausfinden:

1. Was ist der CSS-Wert, der tatsächlich auf dieses Element (berechnet Stil) angewendet wird
2. Sobald ich den berechneten Stil gefunden, möchte ich wissen, woher es (wie Dateinamen und die Zeilennummer) kommt

ich weiß, das manuell mit devtools getan werden kann, aber ich muss dies durch ein Script.

Dank

Answer 1

Sie Window.getComputedStyle() verwenden können. Ein Beispiel für eine Nutzung:

<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 Siehe um mehr zu erfahren, wie diese Funktion zu nutzen, und es ist die Kompatibilität mit verschiedenen Browsern.

Leider gibt Ihnen dieser Ansatz nicht die Position, woher dieser Wert kommt.