CSS自定义属性

1.定义

:root{
    --view-height:0 ;
}

2.使用var()

div{
    height : var(--view-height,100px) ;
    //后面的数据是前面未定义的时候引用
}

3.可以进行计算calc()

div{
    height:calc(var(--view-height)-10px);
}

4.使用JS更改CSS自定义属性
就和平时用JS操作元素任意的属性一样，自定义属性也可以通过getPropertyValue和setProperty方法操作

document.documentElement.style.getPropertyValue('--view-height');
document.documentElement.style.setProperty('--view-height', 100px);