Web-Inspector: Wie finde ich ein DOM-Element in der Hierarchie, das eine Hintergrundfarbe setzt?

Question

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?

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.

Answer 1

Wählen Sie alle Elementeltern aus, loopen Sie sie und überprüfen Sie background-color. Im Web-Inspektor schreiben Code in console Registerkarte

$(document).ready(function() { 
 
    var parents = $('.div8').parents(); 
 

 
    $.each(parents, function() { 
 
    if ($(this).css('background-color') != 'transparent' && $(this).css('background-color') != 'rgba(0, 0, 0, 0)') { 
 
     console.log($(this).attr('class') + ':' + $(this).css('background-color')); 
 
     return false; 
 
    } 
 
    }); 
 
});

.div3 { 
 
    background-color: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<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>