CSS 变量

提示

IE: 啊这？

定义 CSS 变量

:root {
  --width: 100px;
}

.box {
  --height: 100px;
}

使用 CSS 变量

.box {
  width: var(--height);
}

通过 JS 来使用 CSS 变量

获取变量

getComputedStyle(document.querySelector(':root')).getPropertyValue('--width')
getComputedStyle(document.querySelector('.box')).getPropertyValue('--height')

设置变量值

document.querySelector(':root').style.setProperty('--width', '50px')
document.querySelector('.box').style.setProperty('--height', '50px')