如何在HTML网页中展示CSS变量的实际取值内容

方案1：纯CSS实现（适合快速测试，无JS依赖） #

利用CSS计数器可以直接读取CSS变量值的特性，配合伪元素输出：

/* 你的变量定义示例 */
:root {
  --pick-container-width: 5vh;
}

h1::after {
  counter-reset: width-val var(--pick-container-width);
  content: "--pick-container-width: " counter(width-val);
}

说明：该方案对新浏览器兼容良好，仅能在伪元素中展示，无法把值写入h1的原生文本节点

方案2：JavaScript实现（兼容性最优，灵活性最高） #

直接读取计算后的CSS变量值，插入到h1元素内：

// 读取全局（:root下）的CSS变量值
const cssVarValue = getComputedStyle(document.documentElement).getPropertyValue('--pick-container-width').trim();
// 写入h1元素
document.querySelector('h1').innerText = cssVarValue;

如果你的变量是定义在某个特定DOM节点而非全局根节点，把document.documentElement替换为对应节点即可。

内容的提问来源于stack exchange，提问作者DNAScanner