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

我需要在使用javascript单击angular中的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>

有什么问题吗？如何解决此问题？

不建议直接更改dom元素，您可以使用ngStyle 指示

模板

组成部分

公共宽度='首字母'；// 如果可以使用ngStyle，则不建议直接更改dom元素 指示

模板

组成部分

---

公共宽度='首字母'；// 尽量避免直接访问html元素。整个角度点非常简化，以便为您处理DOM

不要直接设置属性，而是让Angular为您解决这一问题：

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

---

尽量避免直接访问html元素。整个角度点非常简化，以便为您处理DOM

不要直接设置属性，而是让Angular为您解决这一问题：

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

---

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

<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>

在html中

---

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

<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>

在html中

---

您使用的是什么版本的angular？如果您使用的是angularjs v1.x，您是否尝试在HTML中使用ng click=maximundth？i使用click。角度版本8您正在使用的角度版本的可能副本？如果您使用的是angularjs v1.x，您是否尝试在HTML中使用ng click=maximundth？i使用click。角度版本8的可能重复存在一个小错误“cadr”“col-md-6”=>“cadr”+“col-md-6”。。。我认为最好使用[ngClass]={'cadr col-md-6 col-xl-6 col-sm-12 col-lg-6'：true，newSize:toggleState，oldSize:！toggleState我只是喜欢使用ngStle和ngClass有一个小错误'cadr''col-md-6'=>'cadr'+'col-md-6'…我认为最好使用[ngClass]={'cadr col-md-6 col-xl-6 col-sm-12 col-lg-6'：true，newSize:toggleState，oldSize:！toggleState我只喜欢使用ngStle和ngClass

<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>

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

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

<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>