JS运行报错TypeError: Cannot read properties of null (reading 'width')求助

你遇到的报错TypeError: Cannot read properties of null (reading 'width')中文翻译为：类型错误：无法读取 null 的属性（读取 'width' 时触发）

该错误的本质是document.getElementById("inputimage")没有找到对应元素，返回了null，后续读取null.width时触发异常，常见触发场景如下：

• 代码执行时机早于DOM渲染完成：JS加载运行时，ID为inputimage的img元素还没被浏览器解析插入到DOM树中，无法匹配到对应元素
• 元素ID不匹配：页面实际存在的img元素ID拼写、大小写与inputimage不一致，HTML的ID属性大小写敏感
• 元素被提前移除：如果该img是动态生成的元素，执行这段代码前已经被其他业务逻辑从DOM中删除

针对上述场景对应修复即可：

1. 调整代码执行时机，确保DOM加载完成后再运行逻辑，同时增加非空判断避免异常崩溃，示例代码如下：

// 等待DOM全部渲染完成后再执行内部逻辑
document.addEventListener('DOMContentLoaded', function() {
  const ClarifaiFace = data.outputs[0].data.regions[0].region_info.bounding_box;
  const image = document.getElementById("inputimage");
  // 非空校验，找不到元素直接终止逻辑避免报错
  if (!image) {
    console.error('未找到ID为inputimage的图片元素');
    return;
  }
  const width = Number(image.width);
  const height = Number(image.height);
  console.log(width, height);
  return {
    leftCol: ClarifaiFace.left_Col * width,
    topRow: ClarifaiFace.top_Row * height,
    rightCol: width - (ClarifaiFace.right_Col * width),
    bottomRow: height - (ClarifaiFace.bottom_Row * height)
  }
})

2. 核对页面img元素的ID属性，保证和代码中inputimage完全一致
3. 如果是动态生成的img元素，需要将这段人脸框计算逻辑放在img元素成功插入DOM的回调之后执行

另外你提供的原始代码末尾多了一个多余的}闭合符号，会触发语法错误，需要删除。

内容的提问来源于stack exchange，提问作者Amit Kumar