如何获得没有背景的元素颜色？答案

【问题标题】：How to get element color which has no background?如何获得没有背景的元素颜色？
【发布时间】：2023-03-27 21:05:01
【问题描述】：

如何有效地获取没有背景但他的父母之一有背景的元素的颜色？例如，这是 3 级深度集：

TOP1 是红色的
TOP2 为绿色
TOP3 没有定义背景颜色，但它是绿色的。

我可以编写一个函数来通过父母发起攻击并找到 backgroundColor 属性，但我相信它并不可靠并且跨浏览器会很糟糕。

更新

我可能想澄清一下我为什么想要这样的东西。

我的一个案例：我正在为一个表格构建粘性标题，它将克隆表格的第一组列并将它们粘贴（位置：固定）用户滚动非常宽的表格。这样他们就可以看到他们正在查看的列。

有时表格有与之关联的样式，列有颜色，这些颜色可以从表格、容器或任何地方继承。这就是为什么我坚持使用 JavaScript 解决方案。

【问题讨论】：

看看window.getComputedStyle。但旧 IE 版本不支持它。
@FelixKling - 我相信他需要更多的东西来解决最里面元素的背景被定义为透明的情况。
您确定想要找到第三个元素的背景颜色吗？通常这些问题都带有某种 hack 的味道，实际上您需要进行一些代码重构以将颜色状态保存在某个单独的数据结构中，而不是 CSS 样式中。
@techfoobar: 哦，我不知何故认为background-color 是继承的，但似乎并非如此：-/
已经在这里讨论过stackoverflow.com/questions/4259815/…

标签： javascript

【解决方案1】：

没有办法计算TOP3的背景。如果没有设置它的背景，它是透明的。因此，它具有其下方的任何颜色。

例子：

<div style="background: red; width: 100px; height: 100px">
  TOP1
  <div style="background: green; width: 80px; height: 80px">
    TOP2
    <div style="width: 60px; height: 100px; border: solid 1px yellow">
      TOP3
    </div>
  </div>
</div>

预览：

这里，TOP3 是半绿半白。没有任何 CSS 值可以告诉你这一点。

【讨论】：

让我们认为父母总是比孩子大:)
@lukas.pukenis 另外让我们考虑页面上所有元素的定位不是相对的，元素的 z 顺序永远不会改变，边距永远不会是负数等。这样的“让我们考虑”语句使任何解决方案都不可靠。如果你知道确切的约束，你可以写任何适合你需要的东西。在这种情况下，它可能正在通过父母进行迭代。
@Athari - 我会说根本没有办法是不正确的。我们可以遍历使用 elementFromPoint() 找到的元素，每次将我们击中的内容推到底部（使用 zIndex），直到我们击中具有定义的不透明背景的东西。问题是这种方式是否值得麻烦。
@Athari，不必被冒犯。我只是在考虑最一般的情况。可以留下负边距、无序 z 索引等：)
@techfoobar 是的，确切地说，我想知道这是否值得麻烦，或者已经有一个简单的方法可以做到这一点。