如何在按钮单击的基础上添加垂直CSS类？

Question

我正在设计Ionic 4 plus角度应用程序，我创建了3个按钮，每个按钮具有3种不同的颜色（假设所有按钮在第一页中），在第二页中，我使用HTML字段集。现在，当我单击第一个按钮时，第二页字段集的边框颜色应为蓝色， 当我单击第二个按钮时，字段集的边框颜色应为红色等。 下图显示了我到底想要什么。

Answer 1

您可以使用add class和remove class。创建一个函数，该函数将删除边框颜色为黑色的类并添加边框颜色为红色等的

    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>