uniapp 获取dom元素 进行操作
时间: 2023-09-06 22:14:19 浏览: 171
在uniapp中获取dom元素可以使用小程序的选择器api,具体步骤如下:
1. 在template中定义需要操作的dom元素,可以使用id或class属性标识。
```
<template>
<view class="container">
<text id="text">Hello World!</text>
</view>
</template>
```
2. 在js文件中使用选择器api获取dom元素,可以使用uni.createSelectorQuery()方法获取选择器对象,然后使用select方法选中需要操作的元素。
```
export default {
mounted() {
uni.createSelectorQuery().select('#text').boundingClientRect(data => {
console.log('dom元素信息:', data)
}).exec()
}
}
```
3. 获取到dom元素之后可以进行相关操作,比如修改元素的样式、内容等。
```
export default {
mounted() {
uni.createSelectorQuery().select('#text').boundingClientRect(data => {
console.log('dom元素信息:', data)
data.node.textContent = 'Hello uniapp!'
data.node.style.color = 'red'
}).exec()
}
}
```
注意:在uniapp中使用选择器api获取dom元素时,需要使用boundingClientRect方法获取元素信息,因为getBoundingClientRect方法在uniapp中不支持。
阅读全文