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的计算背景颜色，而不必查看parent（s）元素的计算样式。这可能吗？

Answer 1

你显然想要问

如何找到某些元素的背景颜色，因为该颜色被设置为某些祖先的背景颜色，因为所有干预元素都具有透明的背景颜色？

但是，你的问题很混乱，因为你使用的是＆＃34; inherited＆＃34;这个词在CSS中具有非常特殊的含义，这与此无关。

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

你内在的div 看起来就像它有一个papayawhip背景的原因是它实际上有一个透明的背景，它让外部div的papayawhip背景显示出来。没有任何关于知道或关心木瓜病的内部div，或者可以被查询以回归木瓜病。

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

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

Answer 2

将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>

Answer 3

解决方案

以下是一些普通的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)

Demo in jsFiddle

说明

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

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

如何设置背景色？
已解决的值如何工作？

根据MDN，background-color的初始值为transparent，并且不是是继承的属性。这意味着，即使父div应用了颜色，任何未设置样式的子div也将具有background-color的{{1}}。大多数浏览器会将其转换为rgb颜色空间，因此会返回<{> alpha通道 /透明度设置为transparent的{{1}}值。

这种区别看似微不足道，但重要的是要了解页面上的大多数 div可能是透明的。它们不绘制任何颜色，只是不遮罩父元素。如果继承了背景值，则colors with transparency would stack and get stronger on child elements

根据MDN，resolved values是浏览器从.getComputedStyle()返回的内容，其中包括计算值和使用值。使用已解析的值有助于处理特殊值，例如rgba(0,0,0,0)，0%等，并将所有相对值转换为绝对值。此外，Plus还提供了一个一致的API，用于从属性和通过样式表应用的样式信息中获取样式信息。

因此inherit不用于确定背景中显示的颜色；它只是在那里获得div的实际值。然后，我们遍历DOM树，直到找到实际值为止。

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

3 个答案:

解决方案

说明

进一步阅读