如何在运行时调整 DOM 元素的大小答案

【问题标题】：How to resize a DOM element at run time如何在运行时调整 DOM 元素的大小
【发布时间】：2017-06-13 18:46:21
【问题描述】：

在 Angular 2 项目中，我正在尝试调整我通过 id 检索的 DOM 元素的大小。我设置的尺寸如下所列，我没有观察到任何变化。我错过了哪一步？

        document.getElementById('my_grid').setAttribute("style","height:600px");

【问题讨论】：

【解决方案1】：

不要这样使用。您可以使用 Angular 2 功能。

例子

@ViewChild mydiv;

resizeDiv() {
    this.mydiv.nativeElement...
}

【讨论】：

【解决方案2】：

您需要将高度设置为<div> 元素。您的浏览器不会解释 Angular 指令上的 height 属性。

此外，访问 DOM 中元素的首选方式是通过 @ViewChild 装饰器。见accessing native elements in angular2

【讨论】：

【解决方案3】：

在 Angular 2 中，尽可能不要使用核心 javascript 或 jquery 代码来操作 dom 元素。首先尝试使用 do angular 2 功能。

我们可以使用[style.height.px]="height" 并且当你想改变组件的div高度时改变高度值

【讨论】：