CSS变量

摘要：var() 函数还可以使用第二个参数，表示变量的默认值。如果该变量不存在，就会使用这个默认值。变量作用域所在选择器优先级高的变量声明会覆盖优先级低的。

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

具体用法

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

:root{
    --header-height: 70px;
}

body {
    --color: white;
}

.header {
    height: var(--header-height);
}

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

color: var(--color);

height: calc(100vh - var(--header-height));

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

body {
    --color: red;
}

p {
    --color: black;
}

<p>显示为黑色</p>

const isSupported =
  window.CSS &&
  window.CSS.supports &&
  window.CSS.supports('--a', 0);

读取变量的值：

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

修改css变量的值：

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

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！