getComputedStyle returns unexpected CSS values

Question

I'm trying to access a CSS rule's value using getComputedStyle. The following is the value I'm trying to access:

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

But when I test this I instead receive the following value:

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

Following is the code I'm using:

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

I wanted explanation as to why these additional values are being printed, why I'm not getting only the value written in my stylesheet, and how I would go about only getting that value.

`background` sets multiple things at once. Try grabbing `background-image` instead. — , Jul 07 '18 at 14:24
you will never get the style *you* add but the standard value used by browsers including the default ones you don't set — Temani Afif, Jul 07 '18 at 14:24
@Temani Afif: I don't think that came out the way you meant... — BoltClock, Jul 07 '18 at 14:33

score 1 · Accepted Answer · answered Jul 07 '18 at 14:35

As Chris G notes, background as a shorthand sets multiple longhand properties at once, including ones you don't specify. So the computed value of the background shorthand contains values for all the longhands that it applies, in addition to the gradient you did specify — these will all be set to their initial value since you didn't specify them but used the background shorthand. The browser still needs to compute these other values so it can render the layout, and assumes you might be interested in these other values so it hands them to you when you ask for the shorthand.

If you're only interested in the gradient, get the value of the background-image property instead.

getComputedStyle returns unexpected CSS values

1 Answers1