最近看到css的一个属性,就是那种类似变量的属性:var,这个用法可以在一处定义,多处使用,修改起来非常方便,今天就来看看这个属性。

一般用法

我们要先用--*来定义一个变量,并设置好内容,然后再利用var取出内容。

上面的变量是自己定义自己使用的,变量可以在上层定义,下层使用。

变量不存在/变量格式错误

var的后面还可以跟一个备用属性,例如color:var(--color,blue),这时说当--color找不到的时候,用blue代替。

如果想跟两个变量怎么办?var(--color,var(--color1,blue))。注意不能写成var(--color,--color1,blue)。

如果变量存在,但是格式不对是不会用备用的。例如--color:10px,这样只会导致没有效果,但是不会用后面的备用属性。

与calc结合使用

var和calc是一个比较常用的组合,简单使用如下

当var和calc使用的时候,var所获取的对象只能为数字,外乘或除(n)px,注意类似px这种单位不能直接跟在var的后面,例如font-size:calc(1 * var(--size)px);这种写法是错误的。

js操作var属性

由于var属性的特殊性,因此只能用getPropertyValue和setProperty来获取/设置了。

其他文章

0
我要评论

评论

返回
×

我要评论

回复:

昵称:(昵称不超过20个字)

图片:

提交
还可以输入500个字