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

【问题标题】：How to change CSS color of a button via NativeScript?如何通过 NativeScript 更改按钮的 CSS 颜色？
【发布时间】：2017-05-05 00:28:19
【问题描述】：

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

怎么做？

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

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

【问题讨论】：

【解决方案1】：

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

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

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

在你的 xml 中：

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

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

【讨论】：

谢谢。这在我点击按钮时有效，但是，我想在不点击的情况下更改颜色。更好地解释，我有一个具有新颜色的变量，当页面加载时，它应该读取这个变量并将 mainButton 设置为新颜色。是否可以？我以为我可以通过 XML 文件中的“id”获得对按钮的引用，但这似乎不起作用。
是的-在初始化后的任何事件中，您都可以获得带有id的按钮：)您提到page loads-nativescript中的页面有许多事件loaded是一个。因此，向页面加载添加一个事件，然后您将通过其 ID 获取按钮，然后设置 backgroundColor 的属性。这有意义吗？
不幸的是，我不知道该怎么做。我正在使用常规模板，并尝试在函数 createViewModel() 中添加代码。如何通过 id 获取元素？
我得到了我想要的结果（不一定是最好的方法）在页面中添加这个：page.addCss(".btn_MainColor { background-color: "+fbMain+" }");

【解决方案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");

【讨论】：