开发
API

NodesRef.boundingClientRect

添加节点的布局位置的查询请求。查询结果相对于显示区域,以像素为单位。

其功能类似于浏览器中的 getBoundingClientRect 方法。返回 NodesRef 对象对应的 SelectorQuery 对象。

如果提供了 callback 回调函数,在执行 SelectQuery.exec 方法后,节点信息会在 callback 中返回。

语法

nodesRef.boundingClientRect([callback])

参数说明

function callback

回调函数(可选)。

回调函数接受的第一个参数为 object 类型,代表查询结果,属性如下:

参数参数类型说明
idstring节点的 ID
datasetobject节点的 dataset
leftnumber节点的左边界坐标
rightnumber节点的右边界坐标
topnumber节点的上边界坐标
bottomnumber节点的下边界坐标
widthnumber节点的宽度
heightnumber节点的高度

返回值

SelectorQuery

扫码体验

请使用字节宿主APP扫码

代码示例

开发者工具中预览

TTML

<button id="btn">示例按钮</button>

JavaScript

tt.createSelectorQuery()
  .select("#btn")
  .boundingClientRect(function (rect) {
    const {
      id, // 节点的 ID
      dataset, // 节点的 dataset
      left, // 节点的左边界坐标
      right, // 节点的右边界坐标
      top, // 节点的上边界坐标
      bottom, // 节点的下边界坐标
      width, // 节点的宽度
      height, // 节点的高度
    } = rect;
  })
  .exec();
点击纠错
评价此篇文档