如何解决HarmonyOS JS UI 框架的所有样式都可以动态设置吗?
我正在使用 HarmonyOS JS UI 框架来开发可穿戴应用(不是 lite-wearable)。
我正在尝试更改按钮的 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 元素来设置样式,但这也没有改变边框颜色。我知道内联样式优先于类样式,因此在两者中设置样式应该没问题。
谁能看到我是否遗漏了某些东西,或者某些样式不能动态更改?
解决方法
您可以尝试通过以下方式更改边框的颜色
<button
style="text-color: {{ buttonTextColor}};border: 10px solid {{ buttonTextColor }}"
id="my_button"
value="{{ buttonText }}"
@longpress="actionFunction"
>
</button>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。