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

Question

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

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

给rgb(0, 0, 0)我认为是正确的.然而

window.getComputedStyle(h1).backgroundColor

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

我调用h1的元素在屏幕上可见.我期待得到实际的背景颜色.我得到的值(在rgba中)没有错,但也不是很有用.它只是告诉我背景是完全透明的 - 这不是一种颜色.

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

Answer 1

如果你0在你的CSS中设置你的背景颜色:rgba(255,255,255,); getComputedStyle()将返回transparent(在某些浏览器中)而不是您的rgba值.

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

Answer 2

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

这意味着您只能获取以任何方式应用于特定元素的 css 值。

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

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

了解更多信息