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

标签 html css angular viewchild

div 看起来像这样:

<div #container [ngStyle]=...>

如果重要的是包含元素,则容器是一个 flexbox 行;我需要知道我添加到该行的新元素是否适合而不会导致换行。

因此,我的代码将总结容器中每个元素的总大小,并将其与#container 的大小进行比较。

代码是这样的:

#ViewChild('container') pillContainer: ElementRef;
let maxWidth = this.pillContainer.nativeElement.????

这就是问题所在。我不认为它是 offsetWidth,因为我得到的数字更像是一个 margin-left。但是,如果我查看,则没有“宽度”元素:

this.pillContainer.nativeElement.attributes. xxxx

我确实找到了一个名为(带双引号)“width”的元素,但我没有看到获取该属性值的方法。

有什么想法吗? 提前致谢, 瑜珈

最佳答案

根据我偶然发现的文档,我实际上错了:offsetWidth 实际上返回元素的宽度,包括边框,但不包括边距。 getBoundingClientRect() 似乎更有用,因为它显示了应用的任何变换的效果。
我认为这足以解决我的问题。 瑜珈

关于html - Angular 2+ 如何在运行时获取 div 的像素宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48544093/

相关文章:

jquery - 单击删除完成 <tr>

css - SquareSpace:更改部分背景颜色(Eamon/Ethan 模板)

angular - 如何在 Angular 中生成 UUID

javascript - 在打开另一个之前关闭所有 Accordion 选项卡(一次只打开一个)

javascript - 动态添加的行不是可视化的 HTML

css - 带滚动条的固定框?

javascript - 如何有条件地将行添加到 Angular 5的表中

javascript - ASP.NET WebApi DateTimeOffset 序列化为 Json/JavaScript (angular2)

javascript - 将子节点移动到其他父节点仅影响其中的一半

javascript - 为什么 react 中表单数据没有保存到本地存储?