javascript - Angular 中的条件格式

Question

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

有没有办法通过 HTML5 使用 CSS 或 JavaScript 来实现这一点？或者也可以使用其他 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)) + '%';
});