---
name: "NodesRef.boundingClientRect"
mode: "api"
versionRequirements:
  - { name: "基础库", version: "2.10.0" }
title: "NodesRef.boundingClientRect - 添加节点的布局位置的查询请求"
---

## NodesRef.boundingClientRect

> [VERSION] 基础库 >= 2.10.0

### 描述

添加节点的布局位置的查询请求。相对于显示区域，以像素为单位。其功能类似于 DOM 的 getBoundingClientRect

### 参数

`Params`

| 参数 | 类型 | 必填 | 描述 |
| --- | --- | --- | --- |
| `e` | `any` | 是 | 回调函数，参数为节点的布局信息（id, dataset, left, right, top, bottom, width, height） |

### 返回值

类型: `SelectorQuery`

SelectorQuery 对象

### 示例代码

#### 获取节点布局信息

```html
// index.tyml
<view id="box" class="box">目标节点</view>
<button bind:tap="getRect">获取节点位置</button>
```

```js
// index.js
Page({
  getRect() {
    ty.createSelectorQuery()
      .select('#box')
      .boundingClientRect((rect) => {
        console.log('位置', rect.left, rect.top, rect.right, rect.bottom);
        console.log('尺寸', rect.width, rect.height);
      })
      .exec();
  },
});
```

```css
// index.tyss
.box {
  width: 300rpx;
  height: 150rpx;
  background-color: #e8f4ff;
  margin-bottom: 20rpx;
}
```