css变量基本操作
1. html中css变量写法
<div style="--color: #ccc;"> <span style="border: 1px solid var(--color);"> </div> <ul> <li style="--i:1"></li> <li style="--i:2"></li> <li style="--i:3"></li> </ul>
2. js读写css变量
//读 box.style.getPropertyValue('--color').trim(); getComputedStyle(box).getPropertyValue('--color').trim() //写 box.style.setProperty('--color','green'); //删除 box.style.removeProperty('--color');
3. css变量拼接和转换
3.1 如果变量都是字符串,可以直接拼接
:root{ --text-one:'hello'; --text-two:'world' } .box:after{ content: var(--text-one)' 'var(--text-two); }
3.2 变量和单位不能直接拼接
:root{ --size-one:14; } .box{ font-size:var(--size-one)px; /**无效**/ }
计算结果将是
font-size: 14 px; //此时root会使用默认的字体大小,而不是14px
由上可知,变量和单位直接拼接会多出一个空格,正确的拼接方式是借用calc()函数,进行计算
font-size:calc(var(--size-one)*1px);
当然,calc也可以用作CSS变量值当中
--size:calc(20px * 2) 或者 --size: 40px
3.3 利用css计算器将数值变量转换为字符串
.pie { --p: 25; } .pie:after { counter-reset: p var(--p); content: counter(p) '%'; }
4. css变量可以是任意值
css变量可以是任意值,包括任意css片段,js片段,无论是否为合法属性值,都可以
:root{ --margin-top: calc(2vh + 20px); --foo: if(x > 5) this.width = 10; }
参考: 跟我一起全面了解一下CSS变量