Html 如何使用Javascript对象中变量的值动态更改按钮的颜色？

My html创建了一个表，表上的按钮当前为绿色

html

最后是我的css，我想根据d.LeftColor或d.RightColor中的内容进行更改

.table-button {
background-color: chartreuse;
}

因此在本例中，我希望id为leftNode的元素的颜色为#32a89e，id为rightNode的元素的颜色为#a88b32

但是，对于dataLinkResult的每一个d，这可能会发生变化，所以我需要确保颜色是动态更新的

---

如果可能的话，我不想使用JQuery进行此操作。

使用

ngStyle

对于左按钮

[ngStyle]="{'background-color':d.leftColour}"

对于右键

[ngStyle]="{'background-color':d.rightColour}"

---

演示：

您可以按如下方式使用ngStyle属性，并在检查“d”的属性时检查数据是否相等

[ngStyle]="d.data=='something'?{'background-color':'green'} : {'background-color': 'white'}"

您可以尝试：

document.getElementById('leftNode').style['background-color'] = d.leftColour;
document.getElementById('rightNode').style['background-color'] = d.rightColour;

---

这样你就不用JQuery了。

*ngIf不工作？这是简单的JS:）。Angular使用

ngStyle

和

ngClass

提供动态样式。你可以从这里学习，

[ngStyle]="d.data=='something'?{'background-color':'green'} : {'background-color': 'white'}"

document.getElementById('leftNode').style['background-color'] = d.leftColour;
document.getElementById('rightNode').style['background-color'] = d.rightColour;