多种CSS变量技术 带入进入老司机行业
2021-03-06 03:28
标签:变量声明 声明 height support ack color 获取 选择 attr CSS 变量技术 使用 -- 声明变量,使用 var() 函数获取变量。 var() 函数还可以使用第二个参数,表示变量的默认值。如果该变量不存在,就会使用这个默认值。 所在选择器优先级高的变量声明会覆盖优先级低的。 显示为黑色 读取变量的值: 修改css变量的值: 多种CSS变量技术 带入进入老司机行业 标签:变量声明 声明 height support ack color 获取 选择 attr 原文地址:https://www.cnblogs.com/ypppt/p/12900856.html具体用法
:root{
--header-height: 70px;
}
body {
--color: white;
}
.header {
height: var(--header-height);
}
color: var(--color);
与 calc 结合使用
height: calc(100vh - var(--header-height));
变量作用域
body {
--color: red;
}
p {
--color: black;
}
javascript 检测浏览器支持
const isSupported =
window.CSS &&
window.CSS.supports &&
window.CSS.supports(‘--a‘, 0);
javascript 操作css变量
const dom = document.querySelector(‘selector‘);
dom.style.getPropertyValue(‘--color‘);
const dom = document.querySelector(‘selector‘);
dom.style.setProperty(‘--color‘, ‘white‘);