uniapp动态修改元素节点样式详解 uniapp动态修改元素节点样式详

一，通过style属性绑定来修改

html:
对应的js:
实现的效果：

二，利用ref来获取dom元素节点

代码：
实现的效果：

总结

一，通过style属性绑定来修改第一步：肯定是需要获取元素节点

在uniApp项目中没有windouw对象，所以通过document不能直接获取dom节点，vue的refs只对自定义组件有效，对uniapp中的标签不生效。

查看uniapp官网有一个uni.createSelectorQuery() API；可以通过这个属性获取标签的样式，在通过动态绑定样式来修改；

html:

对应的js:

data(){ return {vHeight:22 }},handleFont(){ const that=this uni.createSelectorQuery().select('#index0').boundingClientRect(function (data) { console.log('元素信息0：',data)that.vHeight +=10 }).exec()}

实现的效果：