Can all HarmonyOS JS UI Framework styles be dynamically set?

Question

I'm using the HarmonyOS JS UI Framework to develop a Wearable app (not lite-wearable). I'm trying to change the border-color of a button but it does not want to react to the changing variable. I followed the documentation here.

The HML file

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

The CSS file

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

The JavaScript

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

The button text and text-color changes as the bound variables change but the border-color does not change with it. I even set the style by getting the DOM element in JavaScript but that also didn't change the border color. I know inline styles take preference over class styles so setting the style in both should be ok.

Can anyone see if I am missing something or can some styles just not be changed dynamically?

Answer 1

You may can try to change the color of the border in the following ways

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