如何获取没有背景的元素颜色？

Question

如何高效地获取没有背景但其父元素中有颜色的元素的颜色值？ 例如，这是一个三级深度设置：

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

我没有问题编写函数来迭代查找 backgroundColor 属性，但我认为它并不可靠且跨浏览器兼容性较差。

更新

可能需要我澄清一下为什么要这样做。

其中一个应用场景是：我正在为表格构建粘性标题，当用户滚动非常宽的表格时会克隆表格的第一列并将其固定(position:fixed)，以便他们可以看到他们正在查看的列。

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

- lukas.pukenis

---

Ŕ»ĚŠčąšťőwindow.getComputedStyleŃÇéńŻćŠś»ň«âńŞŹŠö»ŠîüŠŚžšëłIEŃÇé - Felix Kling

@FelixKling - 我相信他需要更多的东西来处理内部元素背景定义为透明的情况。 - techfoobar

你确定你想要查找第三个元素的背景颜色吗？通常这类问题都带有某种黑客技巧的气味，而实际上你需要进行一些代码重构，将该颜色状态保存在某个单独的数据结构中，而不是CSS样式中。 - bezmax

@techfoobar：哦，我有点以为background-color是可以继承的，但似乎并不是这样:-/ - Felix Kling

@Max，可能是这样，请查看更新的问题。 - lukas.pukenis

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值可以告诉你这个。

- Athari

---

让我们考虑父节点始终比子节点大 :) - lukas.pukenis

@lukas.pukenis 另外，让我们考虑页面上所有元素的定位都不是相对的，并且元素的z-order永远不会改变，边距也永远不会为负等等。这样的“让我们考虑”语句会使任何解决方案变得不可靠。如果您知道确切的约束条件，可以编写适合您需求的任何内容。在这种情况下，可能需要通过父级进行迭代。 - Athari

@Athari - 我认为说根本没有办法是不正确的。我们可以使用elementFromPoint()迭代找到的元素，每次将我们命中的元素推到底部（具有zIndex），直到我们命中一个具有定义背景但不透明的东西。问题是这种方法是否值得麻烦。 - techfoobar

@techfoobar 是的，我想知道这是否值得麻烦或者已经有简单的方法可以做到。 - lukas.pukenis

@lukas.pukenis - 如果你需要考虑所有情况（重叠的子元素、更大的子元素等），我想不出任何更简单的方法。如果你可以假设较小的完全包含的子元素和较大的父元素总是这样的话，那么你可以简单地使用.parentNode进行迭代，直到你遇到某些计算样式为background-color定义且不是transparent的东西。 - techfoobar