Question

是否有任何函数或扩展允许使用任何浏览器的Web-Inspector在DOM-Hierarchy中找到元素的样式，例如background-color？

让我们考虑一下看起来像这样的DOM树：

＆＃13;

.div3 {
  background-color: green;
}

＆＃13;

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

＆＃13;

元素选择工具将选择.div8。现在你必须上去树并手动搜索设置绿色的第一个div。有没有树搜索？例如找到适用风格的第一个div＆＃34; background-color＆＃34;树上？搜索框仅查找应用当前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>

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

1 个答案: