getComputedStyle 给出“透明”而不是实际的背景颜色

Posted 2023-02-21

【中文标题】getComputedStyle 给出“透明”而不是实际的背景颜色

【英文标题】：getComputedStyle gives "transparent" instead of actual background color

【发布时间】：2014-05-17 13:31:52

【问题描述】：

这是一个惊喜。以下代码似乎没有给我屏幕上的实际颜色：

h1 = document.querySelector("h1");
window.getComputedStyle(h1).color

给出rgb(0, 0, 0)，我认为这是正确的。不过

window.getComputedStyle(h1).backgroundColor

给出rgba(0, 0, 0, 0)。我在屏幕上看到的实际背景颜色是白色。

我称之为 h1 的元素在屏幕上可见。我期待得到实际的背景颜色。我上面得到的值（在 rgba 中）没有错，但也不是很有用。它只是告诉我背景是完全透明的——那不是颜色。

如何获得 RGB 中的实际背景颜色？

【问题讨论】：

尝试使用dom遍历，如果当前元素的bg是透明的则检查父元素等等。

感谢@Tony，但 getComputedStyle 应该正是如此。

@Leo：你认为为什么应该这样做？

一个很好的问题，@Bergi。我现在意识到background-color 与其他值有点不同，因为它取决于父元素的background-color 之外的许多其他东西。在另一个元素上测试，<span>，即使实际背景是黄色的，我也会再次得到这个rgba(0,0,0,0)。不涉及position、float 等。该元素位于具有 CSS 黄色背景的包含元素的框内。但是，我可以看到决定返回rgba(0,0,0,0) 的原因。

但是@Bergi，它仍然阻止我做我想做的事情。我想获得前景色和背景色之间的对比，以便我可以测试这部分的可访问性。现在看来，我认为这在 javascript 中是不可能的。

【参考方案1】：

如果您在 css 中设置背景颜色：rgba(255, 255, 255, 0)； getComputedStyle() 将返回 transparent（在某些浏览器中）而不是您的 rgba 值。

解决此问题的简单方法是将 alpha 设置为高于 0 的值，例如 rgba(255, 255, 255, 0.01);这将返回 rgba(255, 255, 255, 0.01)

【讨论】：

问题出在 Firefox 上 :) 我浪费了一整天时间寻找 getComputedStyle 返回透明而不是 rgba 的原因

【参考方案2】：

getComputedStyle(h1) 提供元素应用于活动样式表后的css值。

这意味着您可以获取那些仅以任何方式应用于特定元素的 css 值。

例如：- 如果您为h1 :RGB255, 255, 255, 应用了背景，那么您将获得 rgb 格式的背景颜色，否则不会。它不为 html 的默认样式提供值。

要通过getComputedStyle() 获取值，首先应该将其应用于元素。

欲了解更多信息getComputedStyle()

【讨论】：

嗯，谢谢，是的，这就是我看到的，当然，但是我如何获得 html 默认样式颜色值？