CSS :root 声明全局变量,var()函数

本文主要是介绍CSS :root 声明全局变量,var()函数，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

在定义主题或编写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>

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

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

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

设置/修改:

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

获取:

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

这篇关于CSS :root 声明全局变量,var()函数的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！