时间戳

首页 > 解决方案 > 如何使用 CSS var() 设置全局变量（无需设置每个元素的属性？）

javascript - 如何使用 CSS var() 设置全局变量（无需设置每个元素的属性？）

问题描述

在这个 JSFiddle 中：

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

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

标签： javascripthtmlcss

解决方案

选择器以节点为: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>

推荐阅读