html - 如何使用 Angular 6 中的类名更改背景颜色？

Question

如何在单击“确定”按钮时使用类名更改背景颜色或图像。

例如我有一个div，

我可以像这样用 jquery 编写这段代码，

$(".test").css("background","red");

在 JavaScript 中

document.getElementByClassName('.test').style.background="red";

在 Angular 2 或 4 或 5 或 6 中我该怎么做？

changebtn():void{
document.querySelector('test').classList.add('newClass');
}

<div class="test">
</div>

<button (click)="changeBtn()"></button>

我试过这个。但它不起作用。谁能帮我做这件事？

Answer 1

我认为更简单的方法是声明参数并使用 [style.background] :

HTML

<button (click)="changeBtn()" [style.background]="color"></button>

TS

color:string="your first color"

changebtn(){
 //change to your wanted color
  color="red";
}

如果你想使用类:

HTML

<button (click)="changeBtn()" [class]="color"></button>

TS

color:string=""

changebtn(){
 //change to your wanted color
  color="yourClassName";
}

CSS:

.yourClassName{}