在js中改变css中的变量

为了让网页中各个组件在不同的设备上的属性变化不会太大，通常能用js获取当前设备的屏幕宽高，但是该怎么把获得的数据传回到CSS中呢？以下三步即可解决。

1、在CSS中设置全局变量

:root{
    --windowW:100px;
    --windowH:100px;
}

2、在js修改CSS的全局变量

//获取当前设备的宽高
var w = window.screen.availWidth;
var h = window.screen.availHeight;
//修改CSS中的全局变量
document.documentElement.style.setProperty('--windowW', w + "px")
document.documentElement.style.setProperty('--windowH', h + "px")

3、在CSS中应用全局变量

.father{
    width: var(--windowW);
    height: var(--windowH);
}