单击按钮更改离子应用程序的输入边框颜色
单击按钮更改离子应用程序的输入边框颜色
提问于 2021-03-30 00:26:27
如果我在html中有输入TypeScript，我正在试图找出如何通过单击按钮改变Ionic class="mess"应用程序中的输入边框颜色：
<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>我尝试过在document.documentElement.style.setProperty函数中使用changeBorderColor()，但是看起来我需要使用一些不同的方法来获得结果。
回答 2
Stack Overflow用户
回答已采纳
发布于 2021-03-30 12:15:24
你可以试试这样..。
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;
}Stack Overflow用户
发布于 2021-03-30 01:01:57
试试这个：
<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"，两者都应该工作正常。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66863294
复制相关文章
相似问题
腾讯云开发者
