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

我有这个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)元素的计算样式.那可能吗？

解决方法:

你显然是想问

How do I find the background color for some element which is used by virtue of that color being set as the background color of some ancestor which shows through because all intervening elements having transparent background color?

但是,您的问题很混乱,因为您使用的是“inherited”这个词,它在CSS中具有非常特殊的含义,这与此无关.

背景颜色属性不是在CSS意义上继承的.每个元素都有自己的背景颜色,默认情况下是透明的.

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

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

顺便问一下,你的潜在问题是什么？你为什么要这样做？可能有更好的方法.

标签：javascript,css,html,getcomputedstyle
来源： https://codeday.me/bug/20190611/1216875.html