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

Posted 2023-03-13

【中文标题】通过单击按钮更改 Ionic 应用程序中的输入边框颜色

【英文标题】：Change input border color in Ionic application with button click

【发布时间】：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]。

【参考方案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" 都可以正常工作。