AMP开发中如何正确获取元素的宽高尺寸？

首先说明之前操作失效的核心原因：

• AMP有独立的异步渲染、布局生命周期，直接在脚本初始化阶段调用原生getElementById时，目标元素可能还未完成AMP层面的挂载与布局，因此会返回undefined；同时AMP为了避免布局抖动，对同步DOM读取逻辑做了限制，不能直接照搬React中ref读取offsetWidth/offsetHeight的同步写法。

方案1：无自定义脚本场景（官方推荐） #

利用AMP内置的事件绑定与状态管理能力，在元素布局完成的回调中读取尺寸，不需要写额外的自定义JS：

<!-- 初始化存储尺寸的状态 -->
<amp-state id="elementSize">
  <script type="application/json">
    {"width": 0, "height": 0}
  </script>
</amp-state>

<!-- 给目标元素绑定布局完成事件 -->
<div id="targetElement"
  on="layoutComplete:AMP.setState({
    elementSize: {
      width: event.target.offsetWidth,
      height: event.target.offsetHeight
    }
  })">
  待测量的元素内容
</div>

该方式拿到的尺寸是元素实际渲染后的真实宽高，和React中ref.current.offsetWidth/ref.current.offsetHeight的返回值完全一致，后续所有支持amp-bind的组件逻辑都可以直接通过elementSize.width、elementSize.height调用尺寸值。

方案2：自定义脚本场景（使用amp-script时） #

如果你需要在<amp-script>包裹的自定义逻辑中获取尺寸，不要直接调用原生DOM API，使用AMP提供的内置方法等待元素就绪后再读取：

// 写在amp-script对应的脚本逻辑内
const measureElement = async () => {
  // 等待目标元素完成AMP挂载，替代原生getElementById，不会返回undefined
  const target = await AMP.waitForElement('#targetElement');
  // 等待元素构建、布局完成，避免读到0值
  await target.whenBuilt();
  
  const width = target.offsetWidth;
  const height = target.offsetHeight;
  // 在这里写后续依赖尺寸的业务逻辑
}

measureElement();

• AMP.waitForElement是AMP暴露的原生DOM查询封装，会自动等待元素出现在DOM树中再返回实例，解决原生getElementById提前调用返回undefined的问题。
• 必须调用whenBuilt()等待元素布局流程结束，否则即使拿到元素实例，也可能因为还没完成宽高计算读到错误的0值。

常见踩坑说明 #

• 禁止在页面顶层同步脚本中直接读取DOM尺寸：AMP的元素渲染是分阶段异步执行的，同步脚本执行时元素大概率还未完成挂载，读不到有效值。
• 不要用原生MutationObserver监听到节点插入就立刻读尺寸：此时元素还没走完AMP的布局计算流程，拿到的宽高通常是0。
• 如果目标元素在动态渲染组件内部（比如amp-list、amp-mustache渲染的列表项），需要先等待对应组件的渲染完成事件触发，再执行尺寸测量逻辑，否则同样会拿不到元素实例。

内容的提问来源于stack exchange，提问作者Petro Dmytriv