Skip to main content

变量使用

内置变量

变量名称说明
currentColor表了当前元素被应用上的color颜色值。

自定义变量

要使用css 的变量,首先需要声明,而声明可以在任何 {} 区域内,一般会在根元素内声明

语法:var(varName, backupValue)

// 声明
:root{
--varName: 100%;
}

// 使用
body {
width: var(--varName)
}

js 使用 css 变量

js可以通过 getPropertyValue() 获取,返回的是字符串类型

  • 获取
let cssVar = getComputedStyle(document.documentElement).getPropertyValue('--varName')
  • 设置
document.documentElement.style.setProperty('--varname', xxx)