基于显示的条件CSS？ [复制]答案

【问题标题】：Conditional CSS based on display? [duplicate]基于显示的条件CSS？ [复制]
【发布时间】：2021-08-24 17:14:23
【问题描述】：

是否可以在 JavaScript 中根据元素的显示属性（例如display: block、display: none）有条件地向元素添加一个类？

我猜它看起来像这样：

.addClass($invoiceTable.display=block ? "firstClass" : "secondClass");

如果 invoiceTable 的 style="display: block" 则添加 firstClass，否则添加 secondClass。

【问题讨论】：

$invoiceTable.display=block 这不是比较。所以看显示属性还是getComputedStyle
你可以使用 == "block"
另外，您正在检查style 属性，因此假设$invoiceTable 是HTMLElement，$invoiceTable.style.display === 'block'。
这似乎是一种倒退的方式。通常样式来自类，而不是相反。
元素的style 属性仅包含其内联样式，不包含从 CSS 继承的样式。使用getComputedStyle() 获取其实际样式。

【解决方案1】：

实现这一点的一种方法是将该元素的样式属性存储到一个变量中，并检查是显示还是阻止，并在此基础上添加类。

类似这样的：

const display =  document.getElementById("invoiceTable").style.display; // Inline style

或者，如果显示属性是继承属性：

  const display =   window.getComputedStyle(document.getElementById("invoiceTable"), null).display;

然后根据显示添加你的类：

display === 'block' ? element.classList.add("block") : element.classList.add("other");

【讨论】：