小程序如何通过把动态数据值传入到css文件中控制样式

作者：小小林熬夜学编程 | 2024-04-18 18:35:25

踩

场景：动态改变一个模块的高度

<view
  class="box"
  :style="`height: ${boxHeight}px`">
  我是一个动态高度的box,我的高度是{{boxHeight}}px
</view>
1
2
3
4
5

在这里插入图片描述

<view
  class="box"
  :style="{'--boxHeight': `${boxHeight}px`}">
  我是一个动态高度的box
</view>
1
2
3
4
5

// .css文件
.box {
  height: var(--boxHeight); // 这里必须与行内的key对应，var不可少
  border: 1px solid red;
}
1
2
3
4
5

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小小林熬夜学编程/article/detail/447601