html - 如何在角度 6 中单击图像时更改边框半径

Question

我有两个图像。一个是矩形，另一个是圆角图像。并且有一个 div。这个 div 是一个方形框。

1. 如果我单击矩形图像，方形框边框半径为 0px。
2. 就像我单击圆角一样，方框边框半径为 5px。

rectangle():void{
document.getElementsByClassName('square')[0]["style"].borderRadius="0px";
}
roundedCorner():void{
document.getElementsByClassName('square')[0]["style"].borderRadius="5px";
}

.square{
width:200px;
height:100px;
border:1px solid black;
}

<img (click)="rectangle()" src="rectangleImage">
<img (click)="roundedCorner()" src="roundedCornerImage">

<div class="square"></div>

我试过这个。但这对我不起作用。我怎样才能在角度 2 或 4 或 5 或 6 中做到这一点？请任何人帮助我。

标签： htmlcssangularangular5angular6

Answer 1

<img src = "assets/images/web423.jpg" (click)="borderradius='0px'" width="150px" height="150px"/>
<img src = "assets/images/web423.jpg" (click)="borderradius='5px'" width="150px" height="150px"/>

<div [ngStyle]="{'border-radius':borderradius}">Border Radius</div>

您可以使用 [ngStyle] 更改元素的任何样式。