首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >单击按钮更改离子应用程序的输入边框颜色

单击按钮更改离子应用程序的输入边框颜色
EN

Stack Overflow用户
提问于 2021-03-30 00:26:27
回答 2查看 752关注 0票数 0

如果我在html中有输入TypeScript,我正在试图找出如何通过单击按钮改变Ionic class="mess"应用程序中的输入边框颜色:

代码语言:javascript
运行
复制
<form>
  <ion-item>
    <ion-input class="mess"></ion-input>
  </ion-item>
</form>

.css中使用默认颜色

代码语言:javascript
运行
复制
.mess {
  border: 2px solid #88ff00;
}

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

代码语言:javascript
运行
复制
 <ion-button (click)="changeBorderColor()">Change color</ion-button>

我尝试过在document.documentElement.style.setProperty函数中使用changeBorderColor(),但是看起来我需要使用一些不同的方法来获得结果。

EN

Stack Overflow用户

回答已采纳

发布于 2021-03-30 12:15:24

你可以试试这样..。

page.html文件

代码语言:javascript
运行
复制
  <form>
    <ion-item>
      <ion-input  [ngClass]="setBorderColor? 'mess'  : ''"></ion-input>
    </ion-item>
    <ion-button (click)="changeBorderColor()">Change color</ion-button>
  </form>

page.ts文件

代码语言:javascript
运行
复制
 public setBorderColor: boolean = false;

  constructor() { }

  ngOnInit() {
  }

  changeBorderColor() {
    this.setBorderColor = true;
  }

page.scss文件

代码语言:javascript
运行
复制
.mess {
  border: 2px solid #88ff00;
}
票数 0
EN
查看全部 2 条回答
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/66863294

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档