javascript - getComputedStyle 返回意外的 CSS 值

Question

我正在尝试使用 getComputedStyle 访问 CSS 规则的值。以下是我试图访问的值：

background: linear-gradient(to right, red , yellow);

但是当我对此进行测试时，我会收到以下值：

rgba(0, 0, 0, 0) linear-gradient(to right, red, yellow) repeat scroll 0% 0% / auto padding-box border-box

以下是我正在使用的代码：

console.log(window.getComputedStyle(body, null).getPropertyValue("background"));

我想解释为什么要打印这些附加值，为什么我不能只得到写在样式表中的值，以及如何只得到那个值。

标签： javascriptcssgetcomputedstyle

Answer 1

正如 Chris G 所指出的，background作为速记一次设置多个速记属性，包括您未指定的属性。因此，除了您指定的梯度之外，速记的计算值background还包含它应用的所有速记的值——这些都将设置为它们的初始值，因为您没有指定它们而是使用了background速记。浏览器仍然需要计算这些其他值，以便它可以呈现布局，并假设您可能对这些其他值感兴趣，因此当您要求速记时它会将它们交给您。

如果您只对渐变感兴趣，请background-image改为获取属性的值。