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/

getComputedStyle（'background-color'）返回透明的，不继承祖先的

3 个答案: