1

getComputedStyle 应该返回最终计算的 CSS 属性值。但是对于背景颜色，所有浏览器都返回透明（或 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 不起作用，恕我直言。但是这个问题本身应该很有趣。

4

3 回答 3

2

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

您可以在以下位置阅读更多信息：https ://developer.mozilla.org/en-US/docs/Web/CSS/inheritance

于 2018-09-29T21:59:53.387 回答
1

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

初始值 transparent
适用于 所有元素。它也适用于::first-letter和::first-line。
Inherited no
Media visual
Computed value computed color
Animation type a color
规范顺序由形式语法定义的唯一非歧义顺序

于 2018-09-29T22:01:37.423 回答
1

搭载其他答案。这是一个使用继承的 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/

于 2018-09-29T22:01:45.383 回答