小程序获取元素宽高

柔情只为你懂 2022-05-12 10:48 358阅读 0赞

小程序本身是不支持DOM和BOM操作的，但有时候还是需要获取一下宽高的，查了一下，发现真的可以获取到。感谢大佬3秒钟！

小程序的API有个WXML，这次用到wx.createSelectorQuery()方法；

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdodDIwMTc_size_16_color_FFFFFF_t_70][]

<view id='demo'>元素</view>
    
    //创建节点选择器
    const query = wx.createSelectorQuery()
        query.select('#demo').boundingClientRect()
        query.selectViewport().scrollOffset()
        query.exec(function (res) {
          res[0].top       // #the-id节点的上边界坐标
          res[1].scrollTop // 显示区域的竖直滚动位置
          console.log('打印demo的元素的信息', res);
          console.log('打印高度', res[0].height);
        })

小程序文档:[https://developers.weixin.qq.com/miniprogram/dev/api/wxml/wx.createSelectorQuery.html][https_developers.weixin.qq.com_miniprogram_dev_api_wxml_wx.createSelectorQuery.html]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdodDIwMTc_size_16_color_FFFFFF_t_70]: /images/20220512/484dcd6eeef945a697e08e9d660fa566.png
[https_developers.weixin.qq.com_miniprogram_dev_api_wxml_wx.createSelectorQuery.html]: https://developers.weixin.qq.com/miniprogram/dev/api/wxml/wx.createSelectorQuery.html

发表评论取消回复

表情：

评论列表（有 0 条评论，358人围观）

还没有评论，来说两句吧...

相关阅读

相关 Flutter页面绘制完成获取元素宽高

final GlobalKey _containerKey = GlobalKey(); @override void ini

我就是我/ 2022年12月24日 03:53/ 0 赞/ 256 阅读

相关 android获取屏幕宽高与获取控件宽高

获取屏幕宽高 \[java\] [view plain][] [copy][view plain] 1. // 获取屏幕宽高（方法1） 2. int screen

柔光的暖阳◎/ 2022年08月05日 02:43/ 0 赞/ 218 阅读

相关 jQuery 获取元素尺寸（宽和高）

在前面几篇文章中，介绍的都是和DOM相关的jQuery方法，本篇文章依旧继续讲和DOM相关的方法。用jQuery获取一相元素的大小并不难，如下： $(window

╰+攻爆jí腚メ/ 2022年05月14日 13:23/ 0 赞/ 366 阅读

相关小程序获取元素宽高

小程序本身是不支持DOM和BOM操作的，但有时候还是需要获取一下宽高的，查了一下，发现真的可以获取到。感谢大佬3秒钟！小程序的API有个WXML，这次用到wx.create

柔情只为你懂/ 2022年05月12日 10:48/ 0 赞/ 359 阅读

相关获取元素宽高

获取元素宽高值 1.内联样式. element.style读取的只是元素内联样式,即写在元素的 style 属性上的样式,支持读写. var elebox = do

曾经终败给现在/ 2021年10月23日 14:56/ 0 赞/ 372 阅读

相关 js获取宽高

引用自[https://www.cnblogs.com/chengzp/p/cssbox.html][https_www.cnblogs.com_chengzp_p_cssb

短命女/ 2021年10月23日 14:30/ 0 赞/ 368 阅读

相关 Javascript原生获取dom元素宽、高

获取网页窗体方法网页可见区域宽： document.body.clientWidth 网页可见区域高： document.body.clientHe

淩亂°似流年/ 2021年09月17日 07:54/ 0 赞/ 489 阅读

相关微信小程序——获取到px转化为rpx（根据设备宽高动态设置元素宽高）

在项目中需要给一个view标签动态的设置高度首先，先通过调用wx.getSystemInfo获取设备信息可以获取的信息如下图 ![watermark_type_Zm

超、凢脫俗/ 2021年09月17日 07:52/ 0 赞/ 1195 阅读

相关浏览器获取宽高

`screen.availHeight` is the height the browser's window can have if it is maximized.

待我称王封你为后i/ 2021年09月10日 09:44/ 0 赞/ 444 阅读

相关 jq 获取元素宽高的方法补充

1、$对象.width/height("npx/n%"); 等同于$.css('width','npx'); 既可设置，也可获取,无单位，内容区域 2、.c

本是古典何须时尚/ 2021年07月24日 16:47/ 0 赞/ 397 阅读