摘要 今天小编跟大家讲解下有关CSS变量 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关CSS变量 的相关资料，希望小伙伴们看了有

今天小编跟大家讲解下有关CSS变量 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关CSS变量 的相关资料，希望小伙伴们看了有所帮助。

css 变量技术 其兼容性可点击如下链接查看：CSS Variable兼容性

具体用法

使用--声明变量 使用var()函数获取变量。

:root{ --header-height: 70px;}body { --color: white;}.header { height: var(--header-height);}

var()函数还可以使用第二个参数 表示变量的默认值。如果该变量不存在 就会使用这个默认值。

color: var(--color);与calc结合使用height: calc(100vh - var(--header-height));变量作用域

所在选择器优先级高的变量声明会覆盖优先级低的。

body { --color: red;}p { --color: black;}<p>显示为黑色</p>JavaScript 检测浏览器支持const isSupported = window.css && window.css.supports && window.css.supports('--a', 0);JavaScript 操作css变量

读取变量的值：

const dom = document.querySelector('selector');dom.style.getPropertyValue('--color');

修改css变量的值：

const dom = document.querySelector('selector');dom.style.setProperty('--color', 'white');

来源：爱蒂网