通過單擊按鈕更改 Ionic 應用程序中的輸入邊框顏色

Question

我試圖弄清楚，如果我在 html 中輸入了class="mess" ，如何通過按鈕單擊更改 Ionic TypeScript 應用程序中的輸入邊框顏色：

<form>
  <ion-item>
    <ion-input class="mess"></ion-input>
  </ion-item>
</form>

.css中的默認顏色：

.mess {
  border: 2px solid #88ff00;
}

我找不到方法，如何從#88ff00;更改border顏色； 不同的顏色#95214b; 點擊：

 <ion-button (click)="changeBorderColor()">Change color</ion-button>

我已經嘗試在changeBorderColor() function 中使用document.documentElement.style.setProperty ，但看起來我必須使用一些不同的方式來獲得結果。

Answer 1

嘗試這個：

<ion-button (click)="changeBorderColor()">Change color</ion-button>

<script>

function changeBorderColor(){
 
   document.getElementById(."mess").style.borderColor = "#95214b";

}

在您的class="mess"旁邊添加一個id="mess"並在腳本中顯示getElementById="#mess"或者您可以使用getElementByClassName=".mess"或者應該可以正常工作。

Answer 2

你可以試試這個方法...

頁.html文件

  <form>
    <ion-item>
      <ion-input  [ngClass]="setBorderColor? 'mess'  : ''"></ion-input>
    </ion-item>
    <ion-button (click)="changeBorderColor()">Change color</ion-button>
  </form>

page.ts 文件

 public setBorderColor: boolean = false;

  constructor() { }

  ngOnInit() {
  }

  changeBorderColor() {
    this.setBorderColor = true;
  }

page.scss 文件

.mess {
  border: 2px solid #88ff00;
}