html怎么定义全局变量,如何使用css var()设置全局变量(不必设置每个元素的属性?)...

在这个jfiddle中:

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')