css中全局变量，且在js中修改css变量的值

bigsea622

于 2024-06-05 14:53:46 发布

阅读量549

点赞数 4

文章标签： css javascript 前端

本文链接：https://blog.csdn.net/bigsea622/article/details/139472325

版权

在css文件中增加全局变量

:root {
  --header-bar-height: 0;
  --header-status-bar-height: 0;
}

在 js 中，修改这两个变量的值

// 更新 CSS 变量的值
document.documentElement.style.setProperty('--header-bar-height', `${barHeight}px`);
document.documentElement.style.setProperty('--header-status-bar-height', `${statusBarHeight}px`);

再在css中需要获取此变量值的地方使用

// 88px 固定高度 + (变量高度，变量高度未定义或者为0，则 103px 为默认值)
top: calc(88px + var(--header-status-bar-height, 103px));