CSS :root 声明全局变量,var()函数 (主题切换)_css3 var(--)实现主题切换在less中应用

在定义主题或编写css公共样式的时候，我们都会声明很多通用的颜色、字号等。我们这里不使用less或sass，而是原生css变量来实现。并且:root 定义的样式可通过js改变从而达到改变主题等效果。

如苹果官网中的一个效果:(滚轮)

:root是一个伪类，表示文档根元素，非IE及ie8及以上浏览器都支持，在:root中声明相当于全局属性,使用var()来引用

<style>
        //变量的声明
        :root {
            --bcolor: black;
            --percentage: 0%;
             --fColor:var(--bgcolors)//var()函数还可以用在变量声明中        
        }
    	//var函数用来读取变量
        h1 {
            background-color: var(--bcolor);
            background-position-x: calc(100% - var(--percentage));
        }
    </style>
1
2
3
4
5
6
7
8
9
10
11
12
13

var()函数还可以使用第二个参数，表示变量的默认值。如果该变量不存在，就会使用这个默认值。

background-color: var(--bcolor, #fafafa);
1

通过js控制:root定义的样式

设置/修改:

 let h1 = document.querySelector('h1')
 h1.style.setProperty('--percentage', 50%)
1
2

获取:

h1.style.getPropertyValue('--percentage')
1