通过单击按钮更改 Ionic 应用程序中的输入边框颜色答案

【问题标题】：Change input border color in Ionic application with button click通过单击按钮更改 Ionic 应用程序中的输入边框颜色
【发布时间】：2021-06-26 00:26:47
【问题描述】：

我想弄清楚，如果我在 html 中输入了class="mess"，如何通过单击按钮来更改 Ionic TypeScript 应用程序中的输入边框颜色：

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

.css 中的默认颜色：

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

我找不到方法，如何通过点击将border 颜色从#88ff00; 更改为不同颜色#95214b;：

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

我尝试在changeBorderColor() 函数中使用document.documentElement.style.setProperty，但看起来我必须使用一些不同的方式来获得结果。

【问题讨论】：

试试[ngClass] 或[ngStyle]。

标签： html css typescript ionic-framework

【解决方案1】：

你可以试试这个方法……

page.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;
}

【讨论】：

【解决方案2】：

试试这个：

<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" 都可以正常工作。

【讨论】：