- - 和 var 和 :root
--
使用--
前缀声明的属性被称之为CSS的自定义属性var()
通过var()函数引用的自定义属性又被称之为CSS的变量!:root
这是伪类选择器,代表根元素 html
一般我们会定义一些全局变量,如主题颜色
:root {
--themeColor: red;
}
html {
background-color: var(--themeColor);
// 找不到 --themeColor 的话就用 blue
color: var(--themeColor, blue)
}
css为什么不用其他符号声明变量而用–?
Sass中使用$符,在LESS中使用@符,Stylus声明变量直接使用表达式,css只能另选了
js 来获取和改变自定义属性
.getPropertyValue(propertyName)
获取自定义属性的值.setProperty(propertyName, value, priority)
重置自定义属性的值.removeProperty(propertyName)
删除自定义属性
:root{
--bg-color: blue;
}
// 获取
getComputedStyle(document.documentElement).getPropertyValue('--bg-color') // blue
// 赋值
document.documentElement.style.setProperty('--bg-color', 'yellow')
常见问题
问题1:变量转换出空格
:root{
--fong-size: 30;
}
div{
font-size: var(--fong-size)px;
}
此时结果并不是 30px,因为变量转换的时候末尾会带上空格,var(–fong-size)px 会转换成30 px
解决:
// 声明变量时带上px
--fong-size: 30px;
// 使用calc()计算属性
font-size: calc(var(--fong-size) * 1px);