Web-Inspector:如何在层次结构中找到设置背景色的DOM元素？

Question

是否有任何函数或扩展允许使用任何浏览器的Web-Inspector查找样式元素，例如DOM-Hierarchy中的背景颜色？

让我们考虑一个DOM-Tree，它可能看起来像这样：

​

.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>

​

元素选择工具将选择.div8。现在你必须爬上树，手动搜索设置绿色的第一个div。有可用的树搜索吗？例如，在树上找到第一个应用样式“背景色”的div？搜索框只查找应用于当前DOM元素的样式。

Answer 1

选择所有元素父项，循环它们并检查background-color。在web检查器中，在console标签中编写代码

​

$(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>

​