小程序获取

getBoundingClientRect() 用于获取元素的大小及其相对于视口（viewport）的位置信息。

基本语法

const rect = element.getBoundingClientRect();

返回值对象属性

返回的 DOMRect 对象包含以下属性（相对于视口左上角）：

{
x: 100,        // 元素左上角相对于视口的 X 坐标
y: 50,         // 元素左上角相对于视口的 Y 坐标
width: 200,    // 元素的宽度（包含 padding 和 border）
height: 150,   // 元素的高度（包含 padding 和 border）
top: 50,       // 元素上边界相对于视口顶部的距离
right: 300,    // 元素右边界相对于视口左边的距离
bottom: 200,   // 元素下边界相对于视口顶部的距离
left: 100      // 元素左边界相对于视口左边的距离
}

在 Uni-app 中的使用

微信小程序本身不支持getBoundingClientRect，因为它依赖于浏览器的DOM API。在微信小程序中，可以使用wx.createSelectorQuery来获取元素的位置和大小：

const query = uni.createSelectorQuery().in(this);
query.select('#chartCanvas').boundingClientRect(rect => {
const rect = element.getBoundingClientRect(); 
console.log(rect.width, rect.height, rect.top, rect.left);
}).exec();

在Web使用

在Web平台下，可以直接使用getBoundingClientRect，因为它与浏览器原生API兼容

getElementSize() {
const element = this.$refs.myElement;
if (element) {
const rect = element.getBoundingClientRect();
console.log(rect.width, rect.height, rect.top, rect.left);
}
}