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>
https://www.houdianzi.com/ vi设计公司
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');
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步