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

Question

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

怎么做？

我已经尝试过以下一行而没有成功（控制台中没有错误，但页面不再渲染）：

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

Answer 1

一个简单的解决方案是使用其标识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属性，别忘了从Color

导入tns-core-modules/color

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