CSS中变量的作用

CSS中变量的作用

CSS中的变量用于存放属性值，可统一修改样式，不需要再手动更改大量的属性值。

CSS变量需要用到两个方法 : root 和 var() 。

:root 是指文档的根元素，在其中定义的变量可作为 全局变量，例如：

:root{
    /* 变量名：变量值 */
    --col: #393939;
}

 var() 函数用于使用CSS变量，例如：var() 函数用于使用CSS变量，例如：

body {
    height: 500px;
    /* 属性：var(变量名) */
    background-color: var(--col);
}

 注意：CSS变量严格区分大小写，变量名前需要有 -- 符号，例如：--col 。

JavaScript修改CSS变量 

// document.documentElement.style.setProperty("变量名","变量值");
document.documentElement.style.setProperty("--back","#FFFFFF");

• document.documentElement 属性可返回文档的根节点。
•  setProperty() 方法用于设置CSS变量。

CSS变量使用代码 

    
        
        
        
    
    
        
        

            
点击切换