---
name: "NodesRef.boundingClientRect"
mode: "api"
versionRequirements:
  - { name: "Base Library", version: "2.10.0" }
title: "NodesRef.boundingClientRect - Add a query request for the layout position of a node"
---

## NodesRef.boundingClientRect

> [VERSION] Base Library >= 2.10.0

### Description

Adds a query request for a node's layout position. Relative to the viewport, in pixels. Similar to the DOM getBoundingClientRect

### Parameters

`Params`

| Parameter | Type | Required | Description |
| --- | --- | --- | --- |
| `e` | `any` | Yes | Callback function; receives the node’s layout information (id, dataset, left, right, top, bottom, width, height). |

### Return Value

Type: `SelectorQuery`

SelectorQuery object

### Examples

#### Get node layout information

```html
// index.tyml
<view id="box" class="box">Target node</view>
<button bind:tap="getRect">Get node position</button>
```

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

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