Angular中的条件格式

Question

以下是Microsoft Excel中的条件格式设置功能，其中颜色条表示与最高值相比的百分比。

无论如何使用CSS或JavaScript使用HTML5实现这一目标？或者也许使用额外的Angular库。

我正在考虑使用clip-path，但可能并未在所有浏览器上广泛支持此功能

Answer 1

您的意思是this吗？

你可以在vanillaJS中做到这一点。你必须获得所有元素

const elNodes = document.querySelectorAll('.element');
const elements = [...elNodes];

获取其值并找到最大值

const elementsValues = elements.map((el) => parseFloat(el.children[1].textContent));
const maxValue = Math.max(...elementsValues);

最后根据值更改元素的宽度：

elements.forEach((el) => {
    el.children[0].style.width = 100 / (maxValue / parseFloat(el.children[1].textContent)) + '%';
});