如何根据按钮点击添加特定的css class？

Question

我正在设计 Ionic 4 plus angular 应用程序，我创建了 3 个彼此具有 3 种不同颜色的按钮（假设所有按钮都在第一页），在第二页我使用 HTML 字段集。现在我想当我点击第一个按钮时，第二页的字段集边框颜色应该是蓝色的，当我点击第二个按钮时，字段集边框颜色应该是红色等。下图显示了我想要的。

Answer 1

您可以使用添加 class 和删除 class.Create 函数，该函数将删除 class 边框颜色为黑色并添加 class 边框颜色为红色和 e.t.

    function myFunction() {
     var element = document.getElementById("myDIV");
     element.classList.add("mystyle");//add class
    } 

    function myFunction() {
     var element = document.getElementById("myDIV");
     element.classList.remove("mystyle");//remove class
    }

为了更好地理解，请阅读以下内容：https://www.w3schools.com/howto/howto_js_add_class.asp 还有这个：https://www.w3schools.com/howto/howto_js_remove_class.asp

祝你好运:)

Answer 2

您可以在您的代码中参考以下代码示例。这不是一个完整的工作示例，但它具有基本的想法。

page1.html

<button ion-button (click)="gotoPage2('blue')" color="blue">First button</button>
<button ion-button (click)="gotoPage2('red')" color="red">Second button</button>
<button ion-button (click)="gotoPage2('green')" color="green">Third button</button>

page1.ts

public gotoPage2(event ,color ){
this.navCtrl.push(page2,{
color:color
});
}

page2.ts

export class Page2 {
value:any;
constructor(public navParams: NavParams) {
    this.color = navParams.get('color');
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad EmiCalPage');

  }

}

page2.html

<div [ngClass]="color" >

</div>

如何根据按钮点击添加特定的css class？

How to add perticular css class based on the button click?

css

typescript

ionic4