原生css中声明变量

原生css中声明变量

如何申明变量

可以像定义任何css属性一样来申明变量，不同的是，变量名必须以--开头。如 --primary-color: #6bc30d

 

如何使用变量

而要使用一个变量的值，需要使用 var() 函数，并将变量的名称作为参数传入。 如 color: var(--primary-color);

var()函数

var()函数可以代替元素中任何属性中的值的任何部分。

var() 函数接受两个参数，参数一是要替换的自定义属性的名称，参数二是可选的，作为参数一无效时候的回退值（如果第一个参数引用的自定义属性无效，则该函数将使用第二个值）。

var( <custom-property-name> [, <declaration-value> ]? )
/*<custom-property-name> 自定义属性名*/
/*<declaration-value> 声明值（回退值）*/

在js中使用css变量

css变量是DOM的一部分，这意味着我们可以通过javascript来访问/修改css变量的值，这是scss等css预处理器所做不到的。 要用JavaScript来更新CSS变量，需要调用已声明变量元素上的style对象上的 setProperty 方法。

setProperty()

//语法
element.style.setProperty(propertyName, value, priority);
//propertyName 是一个 DOMString 被更改的CSS属性.
//value <可选> 是一个 DOMString 新的属性值. 如果没有指定, 则当作空字符.不能包含 "!important"
//priority <可选> 是一个 DOMString。允许 "important" CSS 优先被设置. 如果没有指定, 则当作空字符.

//在根元素（html）上更新变量值
document.documentElement.style.setProperty(propertyName, value)
复制代码

示例

:root {
  --font-size: 20px;
  --background: red;
}
body {
  font-size: var(--font-size);
  background-color: var(--background);
  color: #fff;
}
复制代码

<h1>使用JavaScript来改变背景色</h1>
 <button data-value="red">红色</button>
 <button data-value="green">绿色</button>
 <button data-value="blue">蓝色</button>
 <button data-value="yellow">黄色</button>

 <script>
   let $buttons = document.querySelectorAll('button')
   $buttons.forEach(button => {
     button.addEventListener('click', () => {
       let value = button.dataset.value
       document.documentElement.style.setProperty('--background', value)
     })
   })
 </script>