![](/img/trans.png)
[英]How to change the CSS property (border color) of input tag of form on button click and also submit data?
[英]Change input border color in Ionic application with button click
我试图弄清楚,如果我在 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
,但看起来我必须使用一些不同的方式来获得结果。
尝试这个:
<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"
或者应该可以正常工作。
你可以试试这个方法...
页.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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.