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

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

如何做到这一点？

我已经试过下面没有成功行（没有错误在控制台，但页面已不渲染）：

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

2017-05-05 Alex Souza

简单的解决办法是使用它的ID来获得按钮的一个实例mainButton。然后更改css或View实例的backgroundColor属性。

例如说你对tap事件按钮这一事件：

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

在你的XML：

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

有很多其他方法对何时执行，但应帮你弄明白:)

2017-05-05 00:43:06

谢谢。这在我点击按钮时起作用，然而，我想在没有点击的情况下改变颜色。更好地解释，我有一个新的颜色的变量，当页面加载时，它应该读取此变量并将mainButton设置为新颜色。这可能吗？我想我可以通过XML文件中的“id”获得对按钮的引用，但这似乎不起作用。 –

是的 - 你可以在初始化后的任何事件中使用它的'id'按钮。你提到'页面加载' - nativescript中的页面有很多事件'loaded'是一个。因此，向页面加载添加一个事件，然后通过ID获取按钮，然后为backgroundColor设置属性。那有意义吗？ –

不幸的是我不知道该怎么做。我正在使用常规模板，并试图在函数createViewModel（）中添加代码。我怎么能通过它的ID获取元素？ –

你可以直接在你的css文件中这样做

Button { 
    background-color: red; 
}

或

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

，您还可以更新的亮点，颜色过

Button:highlighting { 
    background-color: green; 
}

，你可以使用JS/TS的样式属性，并且不要忘记从tns-core-modules/color

导入 Color

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

2017-05-05 00:48:04 KielSoft

回答