css变量
在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);
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。