如何使用css var()设置全局变量(不必设置每个元素的属性?)

在这个jfiddle中:

https://jsfiddle.net/9e22zasm/946/

CSS var() 正在使用javascript设置 setProperty :

// CSS:

:root {
  --footer-color: #2cba92 // default
}

footer {
  background-color: var(--footer-color)
}

// JS:

const footer = document.querySelector('footer')
footer.style.setProperty('--footer-color', 'red')

问题是,我想设置 Var() 在许多元素中(它们都将共享相同的元素 Var() ):

// CSS:

:root {
  --primary-color: #2cba92 // default
}

header {
  background-color: var(--primary-color)
}

section {
  background-color: var(--primary-color)
}

footer {
  background-color: var(--primary-color)
}

什么是更容易改变的方法 --primary-color 更改页眉、节和页脚的颜色?因为如果我找不到方法,我必须逐个更改每个元素:

// JS:

const footer = document.querySelector('header')
header.style.setProperty('--primary-color', 'red')

const footer = document.querySelector('section')
section.style.setProperty('--primary-color', 'red')

const footer = document.querySelector('footer')
footer.style.setProperty('--primary-color', 'red')