getComputedStyle('background-color') 返回透明，不继承祖先的 [重复]

Question

getComputedStyle 应该返回最终计算的 CSS 属性值。但是对于背景颜色，所有浏览器都返回 transparent（或 rgba(x,x,x,0)），而不是计算从祖先那里继承的值。

该方法唯一有效的情况是元素具有直接指定的背景颜色（即使通过其类，但不是通过父级的定义）。但这使得 getComputedStyle 无用，它应该考虑所有祖先的定义。

该方法适用于其他事物，如小提琴中所示的颜色。

如何在 JS 中获取元素的有效背景颜色，而不是每个元素都告诉我它是透明的？

let para = document.querySelector('p');
let compStyles = window.getComputedStyle(para);
para.textContent = 'Incorrect background-color: ' + compStyles.getPropertyValue('background-color') + ', but font color is correct: ' + compStyles.getPropertyValue('color');

/* no colors are specified for p */
p {
  width: 400px;
  margin: 0 auto;
  padding: 20px;
  line-height: 2;
  font-size: 2rem;
  font-family: sans-serif;
  text-align: center;
}

/* this is the important part, only color gets inherited, not background-color */
div {
  background-color: purple;
  color: lightblue;
}

<!-- Original example taken from MDN: https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle -->

<div>
  <p>Hello</p>
</div>

如果有帮助，X 问题是如何计算用户脚本中页面中每个元素的字体颜色和背景之间的颜色亮度差异；） 那 getComputedStyle 不起作用使它不可行恕我直言。但这个问题本身应该很有趣。

Answer 1

这是因为 background-color 属性不被子元素继承（与 color 属性不同）。

您可以阅读更多内容：https://developer.mozilla.org/en-US/docs/Web/CSS/inheritance

Answer 2

这是正确的结果，因为没有继承背景颜色。来自MDN：

初始值 transparent
适用于所有元素。它也适用于 ::first-letter 和 ::first-line。
继承无
媒体视觉
计算值计算颜色
动画类型颜色
规范顺序由形式语法定义的唯一非歧义顺序

Answer 3

捎带其他答案。这是一个使用继承的 css 的工作示例。

/* no colors are specified for p */
p {
  width: 400px;
  margin: 0 auto;
  padding: 20px;
  line-height: 2;
  font-size: 2rem;
  font-family: sans-serif;
  text-align: center;
  background-color: inherit;  /* I added this */
}

/* this is the important part, only color gets inherited, not background-color */
div {
  background-color: purple;
  color: lightblue;
}

https://jsfiddle.net/meq6x5ay/