如何使用角度6中的classname更改背景颜色？

Posted 2021-04-09

如何使用单击确定按钮上的类名更改背景颜色或图像。

例如，我有一个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>

我试过这个。但它没有用。任何人都可以帮我解决这个问题吗？

答案

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

html

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

TS

color:string="your first color"

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

如果你想使用class：

HTML

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

TS

color:string=""

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

CSS：

.yourClassName{}

另一答案

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

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

在组件中

import { ElementRef, ViewChild, Renderer2 } from '@angular/core';

@ViewChild('changeClass') elementRef: ElementRef;

constructor(private renderer: Renderer2){}

changebtn = () => {
    this.renderer.addClass(this.elementRef.nativeElement, 'new-class');
}

另一答案

你可以这样做：

document.getElementsByClassName('test')[0]["style"].background="red";

这是Stackblitz的工作示例：Set background color by ClassName Angular (2/4/5/6)

另一答案

您还可以像这样使用className属性：

<div [className]="'active'"></div>

现在在你的CSS文件中，你需要有一个名为active的类（然后改变背景颜色或任何你想要的颜色）。

当然，这允许您使其动态化，例如：

<div [className]="active ? active :disabled"></div>

现在，Angular将在组件的类中查找名为active的属性。然后，这将转换为布尔值，如果此布尔值为true，则应用活动类，否则禁用。

在其他答案中还有其他方法也很好。