小程序获取DOM属性（高、宽）

参考资料：

https://www.jianshu.com/p/9a80fbf97636

https://blog.csdn.net/bright2017/article/details/82736078

https://www.cnblogs.com/lonhon/p/7912031.html

 

小程序节点查询方法:wx.createSelectorQuery()

1、使用方法：

实例：

Page({
  queryMultipleNodes: function(){//声明节点查询的方法
    var query = wx.createSelectorQuery()//创建节点查询器 query
    query.select('#the-id').boundingClientRect()//这段代码的意思是选择Id=the-id的节点，获取节点位置信息的查询请求
    query.selectViewport().scrollOffset()//这段代码的意思是获取页面滑动位置的查询请求
    query.exec(function(res){
      res[0].top       // #the-id节点的上边界坐标
      res[1].scrollTop // 显示区域的竖直滚动位置
    })
  }
})

2.项目应用：

具体步骤：

（1）使用createSelectorQuery() 创建节点查询器；

（2）获取节点，发送节点信息查询请求

（3）使用query.exec(function(res){} 进行查询

onLoad: function(options) {
    var that = this
    const query = wx.createSelectorQuery()
    query.select('#canvas_id').boundingClientRect()
    query.exec(function(res) {
      that.setData({
        canvas_w: res[0].width,
        canvas_h: res[0].height
      })
      console.log(res, '节点')
      // res[0].top       // #the-id节点的上边界坐标
    })