getComputedStyle('background-color') returns透明，不继承祖先的

Question

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

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

该方法适用于 fiddle.

中显示的颜色等其他内容

如何在 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:

Initial value transparent
Applies to all elements. It also applies to ::first-letter and ::first-line.
Inherited no
Media visual
Computed value computed color
Animation type a color
Canonical order the unique non-ambiguous order defined by the formal grammar

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/

getComputedStyle('background-color') returns透明，不继承祖先的

getComputedStyle('background-color') returns transparent, does not inherit ancestor's

javascript

css

background-color

getcomputedstyle