如何解决Firefox 检查工具：如何确定透明元素的背景颜色？
我正在查看一个不是我创建的网页，并试图找到它在元素“下方”使用的背景颜色。不幸的是，该元素不是我正在查看的设置背景颜色的元素。如何找出该元素的背景颜色？我是否只需要点击每个家长，直到找到具有背景颜色的家长？我希望使用 Firefox 检查工具可以更轻松地做到这一点。
背景颜色只是一个例子。我知道我可以为此使用颜色选择器工具，但同样的问题可能适用于“谁在设置此字体大小”和“谁在设置此框大小？”我想学习如何更好地检查属性，而不是如何更好地找到背景颜色。
解决方法
背景图片或背景颜色实际上是一种特殊情况，因为它们不是继承而来的。这意味着，您必须检查正在检查的元素后面的其他元素，以找到设置背景的元素。通常这些是祖先元素，但情况并非总是如此。您正在检查的元素可能已定位或具有 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 以查看该值是否来自浏览器样式表本身。
此外，您可以单击面板中每个选择器旁边的小目标图标，以突出显示页面内与选择器匹配的元素。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
