Question

我正在查看一个不是我创建的网页，并试图找到它在元素“下方”使用的背景颜色。不幸的是，该元素不是我正在查看的设置背景颜色的元素。如何找出该元素的背景颜色？我是否只需要点击每个家长，直到找到具有背景颜色的家长？我希望使用 Firefox 检查工具可以更轻松地做到这一点。

背景颜色只是一个例子。我知道我可以为此使用颜色选择器工具，但同样的问题可能适用于“谁在设置此字体大小”和“谁在设置此框大小？”我想学习如何更好地检查属性，而不是如何更好地找到背景颜色。

Answer 1

背景图片或背景颜色实际上是一种特殊情况，因为它们不是继承而来的。这意味着，您必须检查正在检查的元素后面的其他元素，以找到设置背景的元素。通常这些是祖先元素，但情况并非总是如此。您正在检查的元素可能已定位或具有 display 的 fixed 值或类似值。而且，背景颜色可以是透明的，因此颜色选择器不一定会返回设置的颜色。

因此，要获取实际位于当前元素后面的元素，您需要针对位于元素内的特定坐标运行 document.elementsFromPoint() 函数。然后你可以遍历它们，找出哪个在设置颜色。

一个简单的 JavaScript 片段来帮助解决这个问题

document.getElementsFromPoint(x, y).forEach(el => {
  const cs = window.getComputedStyle(el);
  bgcolor = cs.getPropertyValue('background-color');
  console.log(el, bgcolor);
});

输出每个元素的背景颜色值，直到根 <html> 元素。只需在控制台面板的命令行中执行即可。

对于所有其他属性，您应该查看规则面板。在那里你可以search for the property你想知道，就像前面提到的font-size。将其放在反引号中以搜索完全匹配的名称。

您可能还想 enable the display of browser styles 以查看该值是否来自浏览器样式表本身。

此外，您可以单击面板中每个选择器旁边的小目标图标，以突出显示页面内与选择器匹配的元素。

Firefox 检查工具：如何确定透明元素的背景颜色？

1 个答案: