如何通過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");