Question

我有

<pod-id>.<service name>.<namespace>.svc.cluster.local

我想根据<span [ngStyle]="{'background-color': dynamicColor}">ABC</span>反色的背景颜色设置文本的字体颜色，以便于阅读。就像background-color是白色一样，文字颜色应该是黑色。如果background-color为黑色，则文本颜色为白色。

在sass中，我可以使用以下功能轻松完成此操作

background-color

但// function to return the text-color based on the passed background color @function text-color($color) { @if (lightness($color) > 50) { @return #000000; // Lighter backgorund, return dark color } @else { @return #ffffff; // Darker background, return light color } }使用 AJAX 根据动态内容更改运行时间。

更新

添加了更多细节以清除问题。

Answer 1

当ngStyle改变时，改变颜色！

元素：

<span ngStyle="{\"backgroundColor\":\"#000\"}">ABC</span>

JS：

setTimeout(function() { 
    var dom = document.querySelector("[ngStyle]");
    var temp = JSON.parse(dom.getAttribute("ngStyle"));
    dom.style.color = (temp.backgroundColor === "#000" ? "#fff" : "#000")
}, 16)

如何在运行时css上根据背景颜色更改文本的颜色

1 个答案: