Gibt es eine Funktion oder Erweiterung, die es erlaubt, das Element mit seinen Stilen zu finden, zum Beispiel die Hintergrundfarbe in einer DOM-Hierarchie mit dem Web-Inspector eines beliebigen Browsers?Web-Inspector: Wie finde ich ein DOM-Element in der Hierarchie, das eine Hintergrundfarbe setzt?
Lassen Sie uns darüber nachdenken, einen DOM-Baum, die wie folgt aussehen könnte:
.div3 {
background-color: green;
}
<div class="div0">
<div class="div1">
<div class="div2">
<div class="div3">
<div class="div4">
<div class="div5">
<div class="div6">
<div class="div7">
<div class="div8">
Some Text
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Das Element Auswahlwerkzeug wählen .div8 wird. Jetzt musst du den Baum hinaufgehen und manuell nach dem ersten div suchen, der die grüne Farbe setzt. Gibt es eine Baumsuche? z.B. Finde das erste div, das den Stil "background-color" auf dem Baum anwendet? Die Suchbox findet nur Stile, auf die das aktuelle DOM-Element angewendet wurde.
Können Sie erklären, warum Sie eine solche Anforderung haben? Ich bin nur neugierig zu wissen. –
In einer komplexen Website (oder Web-Anwendung) gibt es Tonnen von DOM-Elementen, die bestimmte Stile haben. Kann eine Farbe, ein Überlauf oder irgendein anderer Stil sein. Bei der Entwicklung möchten Sie vielleicht wissen, wer einen Überlauf anwendet: versteckt für einige der divs (und die Dinge komisch aussehen lassen). Es gibt viele Stile, die angewendet werden, so dass das "Debuggen" von Augen einige Zeit benötigt, um diese Container zu finden. – SuperNova
Ich glaube nicht, dass das nur mit dem Web-Inspector möglich ist. – Paran0a