css 变量使用

1、使用rem定义字体大小

*{
    font-size: 10px;
}
.aaa{
    font-size: 6rem;
}

<div class="aaa">爱的发多</div>

2、使用自定义变量

:root{
  --s1: 12px;
  --s2: 14px;
  --s3: 16px;
  --s4: 18px;
  --s5: 28px;
  /*颜色1*/
  --c1: #1DAC99;
  --c2: #148F7E;
  --c3: red;
}
.aaa{
    font-size: var(--s5);
    color: var(--c3);
}
.bbb{
    color: orange;
}

<div class="aaa">爱的发多</div>
<div class="aaa bbb">爱的发多</div>
<div class="aaa">爱的发多</div>

js操作css变量

// 获取
var root = getComputedStyle(document.documentElement);
var color = root.getPropertyValue('--c3').trim();
console.log(color);

// 改变
document.documentElement.style.setProperty('--c3', 'yellow');
var color = root.getPropertyValue('--c3').trim();
console.log(color);

// 删除
document.documentElement.style.removeProperty('--c3');
var color = root.getPropertyValue('--c3').trim();
console.log(color);