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

Question

我正在使用 HarmonyOS JS UI 框架来开发可穿戴应用程序（不是 lite-wearable）。我正在尝试更改border-color按钮的 ，但它不想对更改的变量做出反应。我按照这里的文档。

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 元素来设置样式，但这也没有改变边框颜色。我知道内联样式优先于类样式，因此在两者中设置样式应该都可以。

谁能看到我是否遗漏了什么或者某些样式不能动态更改？

Answer 1

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

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