Question

在此JSFiddle中：

正在使用JavaScript的var()设置CSS 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')

Answer 1

:root选择器的目标是<html>下的document.documentElement节点。

因此，要修改此变量，请设置此节点的css属性：

onclick = e => {
  document.documentElement.style.setProperty('--footer-color', '#FF00FF');
}

:root {
  --footer-color: #2cba92;
}

footer {
  background-color: var(--footer-color)
}

<footer>hello</footer>

Answer 2

您可以使用document.styleSheets[0].rules[0].style来定位样式表本身。

这将允许您更新CSS变量，从而仅用一种.setProperty()来更新元素的所有颜色：

const root = document.styleSheets[0].rules[0].style;
root.setProperty('--primary-color', 'red');

:root {
  --primary-color: #2cba92
}

header {
  background-color: var(--primary-color)
}

section {
  background-color: var(--primary-color)
}

footer {
  background-color: var(--primary-color)
}

<header>Header</header>
<section>Section</section>
<footer>Footer</footer>

请注意，.rules[0]定位到样式表中的第一规则集；您需要确保:root位于文档的顶部。

如何使用CSS var（）设置全局变量（而不必设置每个元素的属性？）

2 个答案: