不使用 javascript 在 div 上设置属性值

Question

我需要在使用 javascript 点击 div 时设置这些属性：

maximunWidth() {
    var parentDiv = document.querySelector(".cadr");
    parentDiv.setAttribute("width",(this.size.width - 2).toString());
    parentDiv.setAttribute("height",(this.size.height - 41).toString());
}

这是我的 html 代码：

<div id="cadr" class="cadr col-md-6 col-xl-6 col-sm-12 col-lg-6"></div>
<div class="minmize" (click)="maximunWidth()"></div>

有什么问题？我该如何解决这个问题？

Answer 1

不推荐直接改变dom元素可以使用ngStyle 指令

模板

<div id="cadr" class="cadr col-md-6 col-xl-6 col-sm-12 col-lg-6" 
     [ngStyle]="{'width.px':width ,'height.px':height  }"></div>
<div class="minmize" (click)="maximunWidth()"></div>

组件

public width = 'initial'; // ? default value 
public height  = 'initial'; // ? default value 

public maximunWidth() { 
 this.width = this.size.width - 2;
 this.height = this.size.height - 41;
}

Answer 2

尽量避免直接访问 html 元素。 Angular 的全部意义在于（非常简化）为您处理 DOM。

与其直接设置属性，不如让 Angular 为您处理：

<div id="cadr" class="cadr col-md-6 col-xl-6 col-sm-12 col-lg-6"
     [ngStyle]="{'width': calculatedWidth, 'height': calculatedHeight}"></div>
<div class="minmize" (click)="maximunWidth()"></div>

然后用打字稿中的计算值填充这些值：

maximunWidth() {
    this.calculatedWidth = ...;
    this.calculatedHeight = ...;
}

Answer 3

<div id="cadr" class="cadr col-md-6 col-xl-6 col-sm-12 col-lg-6"  [style.width]="widthDiv+'%'" [style.height]="heightDiv+'%'"></div>
<div class="minmize" (click)="maximunWidth()"></div>

或者，

<div id="cadr" class="cadr col-md-6 col-xl-6 col-sm-12 col-lg-6"  [style.width]="widthDiv+'px'" [style.height]="heightDiv+'px'"></div>
<div class="minmize" (click)="maximunWidth()"></div>

.ts

public maximunWidth() { 
 this.widthDiv= this.size.width - 2;
 this.heightDiv= this.size.height - 41;
}

Answer 4

在您的实现方式中，无论何时单击它都会减小该div 标记的尺寸。尝试使用属性绑定。

cssClass = 'oldSize'
maximunWidth() {
    this.cssClass = 'newSize'
}

在你的 html 中

<div id="cadr" [class]=" 'cadr ' + 'col-md-6 ' + 'col-xl-6 ' + 'col-sm-12 ' + 'col-lg-6 ' + cssClass"></div>
<div class="minmize" (click)="maximunWidth()"></div>