8

我有这个 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 的计算背景颜色，而不必查看父元素的计算样式。那可能吗？

4

3 回答 3

10

解决方案

下面是一些香草 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 颜色空间，因此将返回alpha 通道/透明度设置为rgba(0,0,0,0)的值。0%

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

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

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

延伸阅读

于 2020-06-29T02:59:35.507 回答
5

你显然是想问

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

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

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

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

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

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

于 2017-09-21T06:18:04.017 回答
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>

于 2017-09-21T05:57:53.543 回答