javascript - 如何获得没有背景的元素颜色？

Question

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

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

我编写一个函数来通过 parent 进行迭代并找到 backgroundColor 属性没有问题，但我相信它并不真正可靠并且跨浏览器会很糟​​糕。

更新

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

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

有时表格有与之关联的样式，列有可能从表格、它的容器或实际上任何地方继承的颜色。这就是我坚持使用 JavaScript 解决方案的原因。

Answer 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 值可以告诉您这一点。