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

这篇具有很好参考价值的文章主要介绍了解决微信小程序dom的获取问题，动态修改CSS样式。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

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

微信小程序动态改变样式,css,前端,javascript

这是插件市场中的一个案例，作者使用的进度条是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")

微信小程序动态改变样式,css,前端,javascript

成了！然后再盖住中心

微信小程序动态改变样式,css,前端,javascript

完美！

但是到了微信小程序直接炸了，人家就指着我鼻子说，你要个锤子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%';

完工，希望这篇文章能帮到你，本人也是初学者，可能在数据或者表达上有些难懂，如果需要帮助随时欢迎私信...文章来源地址https://www.toymoban.com/news/detail-743939.html

到了这里，关于解决微信小程序dom的获取问题，动态修改CSS样式的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！