如何通过NativeScript更改按钮的CSS颜色？

Question

我刚开始使用Nativescript 。 我在XML调用（ id="mainButton" class="btn" ）中声明了一个外部CSS文件的按钮。 一切正常（按钮最初显示为蓝色）。 但是，我需要通过代码将其颜色更改为红色。

怎么做？

我尝试了以下行，但没有成功（控制台中没有错误，但页面不再呈现）：

page.css = "mainButton { backgroundColor: red }";

Answer 1

一个简单的解决方案是使用其id mainButton获取按钮的实例。 然后更改css或View实例的backgroundColor属性。

例如，说您在按钮的tap事件上有此事件：

function changeColor(args) {
   var btn = args.object;
   btn.backgroundColor = "#3489db";
}

在您的xml中：

<Button tap="changeColor" class="whatever" />

关于何时执行还有很多其他方法，但这应该可以帮助您弄清楚:)

Answer 2

您可以像这样直接在您的css文件中执行此操作

Button {
  background-color: red;
}

要么

.button-class {
   background-color: red;
}

您也可以更新突出显示颜色

Button:highlighting {
   background-color: green;
}

而且您可以在js / ts中使用style属性，并且不要忘记从tns-core-modules/color导入Color

buttonInstance.style.backgroundColor = new Color("#00FF00");