uniapp怎么获取多个dom元素并且更改样式
时间: 2023-06-12 11:05:29 浏览: 250
uni-app 组件里面获取元素宽高的实现
如果您需要获取多个DOM元素并更改它们的样式,可以使用以下方法:
1. 使用 `uni.createSelectorQuery()` 方法创建一个选择器对象。这个对象可以用来获取DOM元素。
2. 使用 `selectAll()` 方法来获取所有符合选择器条件的DOM元素。
3. 使用 `boundingClientRect()` 方法获取DOM元素的位置和大小等信息。
4. 使用 `exec()` 方法执行选择器并返回结果。
5. 在 `exec()` 方法的回调函数中,使用 `uni.createAnimation()` 方法创建一个动画对象,然后使用 `step()` 方法定义动画效果。
6. 使用 `export()` 方法导出动画对象,然后使用 `animation.apply()` 方法将动画效果应用到DOM元素上。
以下是示例代码:
```
// 获取所有的 .box 元素
uni.createSelectorQuery().selectAll('.box').boundingClientRect(function(rects) {
rects.forEach(function(rect) {
// 创建一个动画对象
var animation = uni.createAnimation({
duration: 1000,
timingFunction: 'ease',
});
// 定义动画效果
animation.rotate(360).scale(0.5).step();
// 将动画效果应用到DOM元素上
uni.createSelectorQuery().select('#' + rect.id).fields({
node: true,
size: true,
scrollOffset: true,
rect: true,
}, function(res) {
res.node.animation = animation.export();
}).exec();
});
}).exec();
```
以上代码将会获取所有 class 为 `.box` 的 DOM 元素,并且定义一个旋转并缩小的动画效果。然后将这个效果应用到每一个 DOM 元素上。
阅读全文