微信小程序,通过class,获取元素的宽
时间: 2024-12-16 16:14:35 浏览: 30
在微信小程序中,如果你想获取一个元素的宽度,通常你会使用JavaScript的`wx.createSelectorQuery()`方法来进行DOM查询。下面是一个基本示例,展示了如何在一个WXML文件中定义一个类(`.custom-class`),然后通过JS来获取这个类对应元素的宽度:
首先,在WXML文件中添加一个拥有特定类的元素:
```html
<wxc-view class="custom-class" bindtap="onTap">点击获取宽度</wxc-view>
```
然后,在对应的JS文件中编写获取宽度的函数:
```javascript
Page({
onTap: function(e) {
const query = wx.createSelectorQuery();
query.select('.custom-class').fields({
node: true,
size: true
}).exec((res) => {
if (res && res[0] && res[0].size.width) {
console.log('元素宽度:', res[0].size.width);
} else {
console.error('未找到匹配的元素');
}
});
}
})
```
在这个例子中,当你点击那个元素时,会触发`onTap`事件,通过`querySelector()`获取指定类名的元素,并使用`fields`选项获取节点和其大小信息,其中`size.width`就是你需要的宽度值。
阅读全文