getComputedStyle returns 意外的 CSS 值
getComputedStyle returns unexpected CSS values
我正在尝试使用 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"));
我想要解释为什么要打印这些额外的值，为什么我不只获得样式表中写入的值，以及我将如何只获得该值。
正如 Chris G 所指出的，background 作为 shorthand 一次设置多个普通属性，包括您未指定的属性。因此 background shorthand 的计算值包含 所有 它应用的普通字符的值，除了您指定的梯度之外——这些都将被设置为它们的初始值，因为您没有指定它们但使用了 background shorthand。浏览器仍然需要计算这些其他值，以便它可以呈现布局，并假设您可能对这些其他值感兴趣，因此当您请求 shorthand.
时它会将它们交给您
如果您只对渐变感兴趣，请改为获取 background-image 属性 的值。
我正在尝试使用 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"));
我想要解释为什么要打印这些额外的值，为什么我不只获得样式表中写入的值，以及我将如何只获得该值。
正如 Chris G 所指出的，background 作为 shorthand 一次设置多个普通属性，包括您未指定的属性。因此 background shorthand 的计算值包含 所有 它应用的普通字符的值，除了您指定的梯度之外——这些都将被设置为它们的初始值，因为您没有指定它们但使用了 background shorthand。浏览器仍然需要计算这些其他值，以便它可以呈现布局，并假设您可能对这些其他值感兴趣，因此当您请求 shorthand.
如果您只对渐变感兴趣，请改为获取 background-image 属性 的值。