Vue获取dom元素节点并操作元素的样式($el的用法以及uni-app中操作元素样式)
在vue中操作dom元素节点的样式有好几种方式这里我总结了两种
第一种:
1.获取到元素节点(这里通过this.$refs获取元素节点)
this.$refs.xxxxx.$el
2.操作元素的样式
this.$refs.num1Underline.$el.style.transform = 'scaleX(1)';
- 这种方法需要注意的是
$el
用于获取vue挂载的实例的dom对象,如果不添加$el
则获取不到style的属性值,会打印TypeError: Cannot read property 'style' of undefined
错误,这个错误大家一定都很熟悉,是类型错误,没有访问到dom元素
第二种:
1.获取到元素的节点
document.querySelector('xxxx')
2.操作元素的样式
document.querySelector('xxxx').style.transform = 'scaleX(1)';
最后:
以上两种方式在uni app 框架中app端是不生效的,具体原因我最近也在慢慢的学习中,如果想在uni app操作dom元素的样式的话,建议使用三目运算符 :class="showActive == 1?activeClass :''"
版权声明:本文为qq_39224105原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。