如何获取从父元素继承的计算背景颜色样式

Question

我有这个 HTML 页面：

document.addEventListener("DOMContentLoaded", function (event) {
  var inner_div = document.getElementById("innerDiv");
  console.log(getComputedStyle(inner_div, null)["backgroundColor"]);
});

#outterDiv {
  background-color: papayawhip;
}

<div id="outterDiv">
  <div id="innerDiv">
    I am an inner div
  </div>
</div>

我想找出内部 div 的计算背景颜色，而不必查看父元素的计算样式。那可能吗？

Answer 1

解决方案

这里有一些普通的 js，它们将获得给定元素的有效背景颜色：

function getInheritedBackgroundColor(el) {
  // get default style for current browser
  var defaultStyle = getDefaultBackground() // typically "rgba(0, 0, 0, 0)"
  
  // get computed color for el
  var backgroundColor = window.getComputedStyle(el).backgroundColor
  
  // if we got a real value, return it
  if (backgroundColor != defaultStyle) return backgroundColor

  // if we've reached the top parent el without getting an explicit color, return default
  if (!el.parentElement) return defaultStyle
  
  // otherwise, recurse and try again on parent element
  return getInheritedBackgroundColor(el.parentElement)
}

function getDefaultBackground() {
  // have to add to the document in order to use getComputedStyle
  var div = document.createElement("div")
  document.head.appendChild(div)
  var bg = window.getComputedStyle(div).backgroundColor
  document.head.removeChild(div)
  return bg
}

然后你可以这样称呼它：

var myEl = document.getElementById("a")
var bgColor = getInheritedBackgroundColor(myEl)

jsFiddle 中的演示

解释

该解决方案通过检查特定元素的解析值来工作。如果背景是透明的，它将从元素的父元素重新开始，直到它找到定义的颜色或到达顶部。

有两个主要概念需要熟悉：

1. 背景色是如何设置的？
2. 解析值如何工作？

根据MDN，background-color有一个初始值的transparent和是不是继承的财产。这意味着即使父 div 应用了颜色，任何无样式的子 div 也会有一个background-colorof transparent。大多数浏览器，将它转换为RGB色彩空间，因此将返回的值rgba(0,0,0,0)与alpha通道/透明度设置为0%。

这种区别可能看起来微不足道，但重要的是要了解页面上的大多数div 可能是透明的。它们不绘制任何颜色，它们只是不掩盖父元素。如果继承了背景值，具有透明度的颜色将在子元素上堆叠并变得更强

根据 MDN，解析值是浏览器返回的值，.getComputedStyle()其中包括计算值和使用值。使用解析值帮助像处理特殊值inherit，initial等和覆羽任何相对值绝对值。Plus 还提供了一个一致的 API，用于从属性和通过样式表应用的属性获取样式信息。

Sowindow.getComputedStyle()不用于确定出现在背景中的颜色；它只是为了获取 div 的实际值。然后我们将向上遍历 DOM 树，直到找到一个实际值。

进一步阅读

• MDN - 颜色值

• MDN - 背景色

• MDN -.getComputedStyle()

• SO - 如何获取 HTML 元素的背景颜色？

• SO - 获取元素的真实背景颜色？

• SO - 如何使用 JS 检测元素的继承背景颜色？

• SO - getComputedStyle 给出“透明”而不是实际的背景颜色

• SO - 如何在 JavaScript 中获取元素的背景颜色？

Answer 2

你显然是想问

我如何找到某些元素的背景颜色，该颜色被设置为某个祖先的背景颜色，因为所有中间元素都具有透明背景颜色而显示出来？

但是，您的问题令人困惑，因为您使用了“继承”一词，该词在 CSS 中具有非常具体的含义，此处不相关。

该background-color属性在 CSS 意义上不是继承的。每个元素都有自己的背景色，默认为transparent.

内部 div看起来像有木瓜背景的原因是它实际上具有透明背景，这可以让外部 div 的木瓜背景显示出来。内部div没有任何东西知道或关心papayawhip，或者可以查询返回papayawhip。

找到内部 div 将具有木瓜背景的唯一方法是遍历 DOM 树并找到最接近的具有非透明背景颜色的父级。这在作为重复目标提出的问题中进行了解释。

顺便说一下，你这里的根本问题是什么？你为什么要这样做？可能有更好的方法。

Answer 3

添加background-color: inherit;到您的#innerDiv

document.addEventListener("DOMContentLoaded", function (event) {
  var inner_div = document.getElementById("innerDiv");
  console.log(getComputedStyle(inner_div, null)["backgroundColor"]);
});

#outterDiv {
  background-color: papayawhip;
}
#innerDiv {
  background-color: inherit;
}

<div id="outterDiv">
  <div id="innerDiv">
    I am an inner div
  </div>
</div>