getComputedStyle возвращает неожиданные значения CSS

Question

Я пытаюсь получить доступ к значению правила CSS с помощью getComputedStyle. Вот значение, к которому я пытаюсь получить доступ:

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"));

Я хотел объяснить, почему эти дополнительные значения печатаются, почему я не получаю только значение, записанное в моей таблице стилей, и как я могу получить только это значение.

Answer 1

Как отмечает Крис Дж, background в качестве сокращения устанавливает сразу несколько свойств, включая те, которые вы не указали. Таким образом, вычисленное значение background Сокращение содержит значения для всех длинных цепей, которые он применяет, в дополнение к указанному вами градиенту - все они будут установлены в их начальные значения, так как вы не указали их, но использовали background стенографии. Браузер все еще должен вычислять эти другие значения, чтобы он мог отобразить макет, и предполагает, что вас могут заинтересовать эти другие значения, поэтому он передает их вам, когда вы запрашиваете сокращение.

Если вас интересует только градиент, получите значение background-image собственность вместо