解决微信小程序dom的获取问题，动态修改CSS样式

【讲故事time】只看干货往下翻↓↓↓

哥们儿用UNIAPP开发微信小程序的过程中，遇到这么一个组件

这是插件市场中的一个案例，作者使用的进度条是vant的Circle 环形进度条

哥们儿开心的很呀，这东西粘贴一下改改数，一天的工作量不就达成了吗？

但是因为种种原因，我还是太高估自己了，vant引入不进去！

还好哥脑瓜子转得快，既然中心是个图层，正好盖到了进度条的内圈。

那我只要把环形进度条删了，用background: conic-gradient把这玩意写成个中心旋转的饼图，不是一个效果吗！？

定义下属性，再用js获取dom改个值，嗯，应该没问题

CSS：

.view1 {background: conic-gradient(var(--one) 0 var(--zero), #d6d6d6 0 100%);}

JS：

document.documentElement.style.setProperty('--zero',45)
document.documentElement.style.setProperty('--one',"red")

成了！然后再盖住中心

完美！

但是到了微信小程序直接炸了，人家就指着我鼻子说，你要个锤子document！？

像我这种初学者直接傻眼

【正题】停停停,干货到了

给需要动态修改的样式创建对象

.view1 {background: conic-gradient(var(--one) 0 var(--zero), #d6d6d6 0 100%);}

然后不多废话，直接在内联中和js对象进行绑定

<view class="view2" :style="{'--one':color1,'--zero':data1}"></view>

然后就可以随意对样式进行动态操作了

this.color1='#74a9ff';
this.data1='20%';

 完工，希望这篇文章能帮到你，本人也是初学者，可能在数据或者表达上有些难懂，如果需要帮助随时欢迎私信...

算了我不装了

给个关注吧！！！给个关注吧！！！给个关注吧！！！