Angular 2+ 如何在运行时获取div的像素宽度

首先帮你澄清几个容易混淆的点：

• offsetWidth 并不是返回margin-left，它实际是元素的总可见宽度，包含内容宽度、内边距（padding）、边框（border）以及滚动条（如果存在的话）。你可能把它和offsetLeft搞混了，后者才是元素相对于父元素的左偏移量。
• 你在attributes里看到的width属性，是HTML标签上显式设置的初始值（比如<div width="500">），但它和元素实际渲染的宽度往往不一致——毕竟flex容器的宽度可能由CSS（比如flex:1、width:100%或自适应布局）动态控制，所以这个属性值没有实际参考意义，不建议使用。

正确获取容器可用宽度的方法 #

要判断flex容器是否会因新增元素换行，你需要获取容器实际可容纳子元素的有效宽度，推荐这两种可靠方式：

1. 使用 clientWidth
clientWidth 返回元素内容宽度加上内边距（padding），不包含边框、滚动条和外边距。如果你的容器没有设置左右padding，或者你需要包含padding的总可用空间，这个值足够好用：

   const containerAvailableWidth = this.pillContainer.nativeElement.clientWidth;
   

2. 使用 getBoundingClientRect()（高精度场景首选）
   这个方法返回元素的精确渲染尺寸，甚至能考虑transform等CSS变换后的宽度，返回值是浮点数，适合需要精准计算的场景。如果要排除容器自身的padding和边框，得到纯内容区的可用宽度，可以这样做：

   const containerRect = this.pillContainer.nativeElement.getBoundingClientRect();
   const computedStyle = getComputedStyle(this.pillContainer.nativeElement);
   // 解析容器的padding和border数值
   const paddingLeft = parseFloat(computedStyle.paddingLeft);
   const paddingRight = parseFloat(computedStyle.paddingRight);
   const borderLeft = parseFloat(computedStyle.borderLeftWidth);
   const borderRight = parseFloat(computedStyle.borderRightWidth);
   // 计算纯内容区的可用宽度
   const containerAvailableWidth = containerRect.width - paddingLeft - paddingRight - borderLeft - borderRight;
   

计算所有子元素的总占用宽度 #

flex布局中子元素的margin也会占据容器空间，所以累加时要包含进去：

let totalChildrenWidth = 0;
const children = this.pillContainer.nativeElement.children;
for (let i = 0; i < children.length; i++) {
  const childRect = children[i].getBoundingClientRect();
  const computedStyle = getComputedStyle(children[i]);
  // 解析子元素的左右margin
  const marginLeft = parseFloat(computedStyle.marginLeft);
  const marginRight = parseFloat(computedStyle.marginRight);
  // 子元素总占用宽度 = 自身宽度 + 左右margin
  totalChildrenWidth += childRect.width + marginLeft + marginRight;
}

判断是否会换行 #

最后对比两个数值即可，考虑到渲染时的微小误差，可以加个1px的阈值：

const willWrap = totalChildrenWidth > containerAvailableWidth + 1;

小提醒：如果容器宽度会动态变化（比如窗口 resize），建议把计算逻辑放在ngAfterViewChecked钩子中执行，确保DOM渲染完成后拿到最新的尺寸。

内容的提问来源于stack exchange，提问作者Yogi Bear