HarmonyOS JS UI Framework的所有样式都可以动态设置吗？

Question

我正在使用 HarmonyOS JS UI 框架开发可穿戴应用程序（不是精简版可穿戴设备）。我正在尝试更改按钮的 border-color 但它不想对变化的变量做出反应。我遵循了文档 here.

HML 文件

<div class="container">
    <button
        style="text-color: {{ buttonTextColor}}; border-color : {{ buttonTextColor }}"
        id="my_button"
        value="{{ buttonText }}"
        @longpress="actionFunction"
            >
    </button>
</div>

CSS 文件

#my_button {
    font-size: 50px;
    border: 10px solid white;
    background-color: gray;
    border-radius: 150px;
    width: 300px;
    height: 300px;
}

JavaScript

export default {
    data: {
        buttonText : "Press Me!",
        buttonTextColor: "#FFFFFF",
    },
    actionFunction() {
        this.buttonText = "I Changed"
        this.buttonTextColor = "#8B0000"
    }
}

按钮文本和文本颜色会随着绑定变量的变化而变化，但 border-color 不会随之变化。我什至通过在 JavaScript 中获取 DOM 元素来设置样式，但这也没有改变边框颜色。我知道内联样式优先于 class 样式，因此在两者中设置样式应该没问题。

任何人都可以看到我是否遗漏了什么或者某些样式不能动态更改吗？

Answer 1

您可以尝试通过以下方式改变边框的颜色

  <button
            style="text-color: {{ buttonTextColor}};border: 10px solid {{ buttonTextColor }}"
            id="my_button"
            value="{{ buttonText }}"
            @longpress="actionFunction"
            >
    </button>

HarmonyOS JS UI Framework的所有样式都可以动态设置吗？

Can all HarmonyOS JS UI Framework styles be dynamically set?

javascript

css

wearables

harmonyos